我是这项技术的初学者。我的导航有问题。
用户登录后,将重定向至底部选项卡导航器屏幕,我的底部选项卡导航器由5个选项卡组成,选项卡1、2、3、4、5,每个选项卡都有相应的页面。在选项卡2(STORE页面)中,当我单击选项卡2时,将出现商店列表。我将商店名称存储在可触摸的不透明区域中,当用户单击商店名称时,它将重定向到产品屏幕,但这一次底部标签导航是不可见的。所以在那个屏幕中,商店提供的产品列表从上一个屏幕中选择。
同样的,我把产品项目列表存储或放置在一个可触摸的不透明,当用户点击该产品时,它会重定向到产品详细信息屏幕,底部的标签导航器仍然不可见或消失。在产品详细信息屏幕中,它显示了所选产品的详细信息,一个按钮"下订单"和购物车图标,如果用户点击它,它会重定向到标签1,这是订单页面。
.
我的预期输出是,即使移动到另一个屏幕,底部选项卡导航器也不会消失或仍然可见,还有购物车图标,如果单击它,它必须移动到选项卡1,即订单页面。
这是我的代码,我已经尝试过了。
app.js
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName="login"
>
<Stack.Screen
name="BottomTabNavigator"
component={myBottomTabnavigator}
options={{
tabBarVisible: true,
}}
/>
<Stack.Screen name="login" component={loginpage} />
<Stack.Screen name="register" component={registerPage} />
<Stack.Screen name="forgotpass" component={ForgotPassword} />
<Stack.Screen name="ordernavigation" component={myorderStackNavigation} />
<Stack.Screen name="Products" component={ProductScreens} />
<Stack.Screen
name="ProductDetailsAndOrder"
component={ProductDetailAndPlaceOrder}
/>
</Stack.Navigator>
</NavigationContainer>
);
myBottomTabnavigator.js
<Tab.Navigator>
<Tab.Screen
name="Tab1"
component={tab1}
options={{
tabBarVisible: true,
}}
/>
<Tab.Screen
name="Tab2"
component={Tab2}
options={{
tabBarVisible: true,
}}
/>
<Tab.Screen
name="Tab3"
component={tab3}
options={{
tabBarVisible: true,
}}
/>
<Tab.Screen
name="Tab4"
component={tab4}
options={{
tabBarVisible: true,
}}
/>
<Tab.Screen
name="Tab 5"
component={tab2}
options={{
tabBarVisible: true,
}}
/>
</Tab.Navigator>
myorderStackNavigation.js
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="productscreen" component={ProductScreens} />
<Stack.Screen
name="productDetails_Order"
component={ProdDetailsScreen}
/>
</Stack.Navigator>
);
}
productDetails_Order.js---在我的购物车图标中,我做了这个。
<TouchableOpacity
onPress={() => {
navigation.navigate("Tab1");
}}
></TouchableOpacity>
1条答案
按热度按时间wfauudbj1#
你必须连接不同的导航器。我会在你的导航索引文件中用一个Stack. Navigator开始,它包含你的底部导航器和所有的标签。底部导航器包含所有的屏幕,并且在需要的地方它包含另一个Stack来显示细节屏幕(或者如果你不使用屏幕,而是使用模态,那么你不需要另一个导航器,但是我认为你希望这样)
就像这样:
然后选择底部导航:
现在只缺少您的产品堆栈与主屏幕和详细信息屏幕,以及unauthorizednavigator堆栈,其中您有您的所有注册和登录屏幕。