Javascript 单击堆栈屏幕的标题右侧图标，导航到react native中的其他屏幕

当我从堆栈屏幕的标题右侧单击购物车图标时，我想导航到购物车屏幕。请告诉我如何达到要求。下面是我的代码

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;

从“反应本机向量图标/羽毛”导入羽毛；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“/screens/Home”导入主页；
从“./screens/Cart”导入CartScreen；
const{width:width}=Dimensions.get（'window'）
const Stack=createStackNavigator（）；
函数CartIcon（）{
返回(
);
}
函数App（）{
返回(
,
),
标题：“商店”，
头型：{
背景颜色：“黑色”，
},
}} />
);
}
导出默认应用程序；

---

请帮帮我。。非常感谢！：）

第一次从

@react-navigation/native

导入

使用导航

，如下所示：

从'@react-navigation/native'导入{useNavigation}；

现在，在您的

CartIcon

组件中，使用此钩子创建导航变量，并使用该钩子导航到购物车屏幕，如下所示：

函数CartIcon（）{
const navigation=useNavigation（）；
const navigateToCart=（）=>{
导航。导航（“CartScreen”）；
}
返回(
);
}

如果您的

Feather

组件没有

onPress

方法，那么您可以将

Feather

组件包装在

touchablepacity

中，如下所示：

从'react native'导入{TouchableOpacity}；
函数CartIcon（）{
const navigation=useNavigation（）；
const navigateToCart=（）=>{
导航。导航（“CartScreen”）；
}
返回(
);
}

此外，在TouchableOpacity上应用适当的样式

还有一件事你不应该在屏幕名称上使用空白字符，所以这里也做了更改：

---

第一次导入
使用来自
@react-navigation/native
的导航，如下所示：

从'@react-navigation/native'导入{useNavigation}；

现在，在您的
CartIcon
组件中，使用此钩子创建导航变量，并使用该钩子导航到购物车屏幕，如下所示：

函数CartIcon（）{
const navigation=useNavigation（）；
const navigateToCart=（）=>{
导航。导航（“CartScreen”）；
}
返回(
);
}

如果您的
Feather
组件没有
onPress
方法，那么您可以将
Feather
组件包装在
touchablepacity
中，如下所示：

从'react native'导入{TouchableOpacity}；
函数CartIcon（）{
const navigation=useNavigation（）；
const navigateToCart=（）=>{
导航。导航（“CartScreen”）；
}
返回(
);
}

此外，在TouchableOpacity上应用适当的样式

还有一件事你不应该在屏幕名称上使用空白字符，所以这里也做了更改：

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


({
头灯：（道具）=>，
标题：“商店”，
头型：{
背景颜色：“黑色”，
},
})}
/>;
函数CartIcon（{navigation}）{
返回(
导航。导航（'购物车屏幕'）}
/>
);
}
您需要像这样将导航道具传递给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')}
    />
  );
}


({
头灯：（道具）=>，
标题：“商店”，
头型：{
背景颜色：“黑色”，
},
})}
/>;
函数CartIcon（{navigation}）{
返回(
导航。导航（'购物车屏幕'）}
/>
);
}