Блог

Я хочу перейти к экрану корзины, когда я нажимаю на значок корзины справа от заголовка экрана стека. Пожалуйста, подскажите мне, как выполнить это требование. Ниже приведен мой код.

App.js

 import Feather from 'react-native-vector-icons/Feather';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import CartScreen from './screens/Cart';


const { width: WIDTH } = Dimensions.get('window')


const Stack = createStackNavigator();

function CartIcon() {
  return (
    <Feather name={'shopping-cart'}/>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">

        <Stack.Screen name="Home"
          component={Home}
          options={{
           headerRight: props => <CartIcon  {...props} />,
            ),
            title: 'Shop',
            headerStyle: {
              backgroundColor: 'black',
            },
          }} />


        <Stack.Screen
          name="Cart Screen"
          component={CartScreen}
          options={{
            title: 'Cart Items',
            headerStyle: {
              backgroundColor: 'black',
            },
          }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;
  

Пожалуйста, помогите мне.. Заранее большое спасибо! 🙂

Вам нужно передать навигационные реквизиты CartIcon следующим образом

 <Stack.Screen
  name="Home"
  component={Home}
  options={({route, navigation}) => ({
    headerRight: (props) => <CartIcon {...props} navigation={navigation} />,
    title: 'Shop',
    headerStyle: {
      backgroundColor: 'black',
    },
  })}
/>;

function CartIcon({navigation}) {
  return (
    <Feather
      name={'shopping-cart'}
      onPress={() => navigation.navigate('Cart Screen')}
    />
  );
}

  

Сначала импортируйте useNavigation , @react-navigation/native как показано ниже :

 import { useNavigation } from '@react-navigation/native';
  

Теперь в вашем CartIcon компоненте создайте переменную навигации, используя этот хук, и используйте ее для перехода к экрану корзины, как показано ниже :

 function CartIcon() {
  const navigation = useNavigation();

  const navigateToCart = () => {
    navigation.navigate("CartScreen");
  }

  return (
    <Feather name={'shopping-cart'} onPress={navigateToCart}/>
  );
}
  

И если у вашего Feather компонента нет onPress метода, вы можете обернуть свой Feather компонент, TouchableOpacity как показано ниже :

 import { TouchableOpacity } from 'react-native';

function CartIcon() {
  const navigation = useNavigation();

  const navigateToCart = () => {
    navigation.navigate("CartScreen");
  }

  return (
    <TouchableOpacity onPress={navigateToCart}>
      <Feather name={'shopping-cart'}/>
    </TouchableOpacity>
  );
}
  

Более того, примените свой соответствующий стиль к TouchableOpacity.

И одна вещь, которую вы не должны использовать в качестве символа пробела в имени экрана, поэтому здесь также внесены изменения :

 <Stack.Screen
  // name="Cart Screen" don't use white space character in screen name
  name="CartScreen"
  component={CartScreen}
  options={{
    title: 'Cart Items',
    headerStyle: {
      backgroundColor: 'black',
    },
  }}
/>;
  

Я поддержал ответ @Venkat Sai, поскольку он был более кратким. Но после использования его в моей реализации я понял, что его можно сократить еще больше. Вот оно, меньше строк кода

    <Stack.Screen
      name="Home"
      component={Home}
      options={({ route, navigation }) => ({
        headerRight: (props) => (
          <Feather
            {...props}
            name={"shopping-cart"}
            onPress={() => navigation.navigate("CartScreen", route)}
          />
        ),
        title: "Shop",
        headerStyle: {
          backgroundColor: "black",
        },
      })}
    />