使用堆栈导航标题导航到购物车屏幕

Question

我有一个包含 7 个不同屏幕的堆栈导航器，并且每个屏幕标题上都放置了一个购物车图标。我想通过将该购物车图标按到购物车屏幕/页面来导航。我试图将 onPress 功能放在图标和标题选项中，但都是徒劳的。 另外，我想知道购物车系统将如何工作。 下面是我的单栈导航屏幕

<HomeStack.Screen name="EARRINGS" component={Earring}
options={{headerRight:() => <ShoppingCartIcon /> }}         
 />  

下面是我的 ShoppingCartIcon 代码：

const ShoppingCartIcon = () => {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
       
            <View style={{position: 'absolute', top: -20,  right: 0, width: 70, height: 70, alignItems:"center",justifyContent:"center", zIndex:2000 }}>
                <Text style={{fontSize:20,fontWeight:"bold"}}>0</Text>
            </View>
            <AntDesign name="shoppingcart" color="black" size={24} style={{marginRight:10}} />
    </View>
    )
  }


export default (ShoppingCartIcon)

请帮帮我。

Answer 1

你可以像下面这样传递导航道具

<HomeStack.Screen
    name="EARRINGS"
    component={Earring}
    options={({ navigation }) => ({
      headerRight: () => (<ShoppingCartIcon navigation={navigation}/> )
    })}
  />

您可以使用导航道具导航到您需要的任何屏幕

const ShoppingCartIcon = ({navigation}) => {
  //other code
  navigation.navigate('Cartscreen')
}