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

您可以通过以下导航道具

max_rows

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

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

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

1 个答案: