单击 Stack Screen 右侧的 header 图标可以导航到 React Native 中的其他屏幕

Question

当我点击 Stack Screen 右侧的 header 购物车图标时，我想导航到购物车屏幕。 请建议我如何达到要求。 下面是我的代码。

应用程序.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;

请帮助我.. 非常感谢: :)

Answer 1

首先从@react-navigation/native导入useNavigation如下：

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',
    },
  }}
/>;

Answer 2

您需要像这样将导航道具传递给 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')}
    />
  );
}

Answer 3

我赞成@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",
        },
      })}
    />