底部选项卡导航器在react native中不可见

我是这项技术的初学者。我的导航有问题。
用户登录后，将重定向至底部选项卡导航器屏幕，我的底部选项卡导航器由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>

你必须连接不同的导航器。我会在你的导航索引文件中用一个Stack. Navigator开始，它包含你的底部导航器和所有的标签。底部导航器包含所有的屏幕，并且在需要的地方它包含另一个Stack来显示细节屏幕（或者如果你不使用屏幕，而是使用模态，那么你不需要另一个导航器，但是我认为你希望这样）
就像这样：

<NavigationContainer
    ref={navigationRef}>
    <Stack.Navigator initialRouteName="Splash">
      <Stack.Screen
        name="Splash"
        component={Splash}
        options={{headerShown: false}}
      />
    
      <Stack.Screen
        name="BottomNavigator"
        component={BottomNavigator}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="UnAuthorizedNavigator"
        component={UnAuthNavigator}
        options={{headerShown: false}}
      />
    </Stack.Navigator>
  </NavigationContainer>

然后选择底部导航：

<Bottom.Navigator
    ref={navigationRef}>
    <Stack.Navigator initialRouteName="Splash">
      <Bottom.Screen
        name="ProductStack"
        component={ProductStack}
        options={{headerShown: false}}
      />
      <Bottom.Screen
        name="AnotherStep"
        component={AnotherStep}
        options={{headerShown: false}}
      />
      [...]
    </Stack.Navigator>
  </Bottom.Navigator>

现在只缺少您的产品堆栈与主屏幕和详细信息屏幕，以及unauthorizednavigator堆栈，其中您有您的所有注册和登录屏幕。

底部选项卡导航器在react native中不可见

1条答案

相关问题

热门标签

最新问答