React Native新手求助：底部标签导航栏跳转页面后消失的问题

嗨，兄弟！我刚上手React Native导航的时候也踩过一模一样的坑😅，你的问题核心就是页面层级结构没搭对——现在你把Products和ProductDetailsAndPlaceOrder这些页面放在了最外层的Stack导航里，完全脱离了底部Tab导航的上下文，所以跳过去之后底部Tab自然就消失了。

给你一步步说怎么改，保证解决问题：

第一步：给Tab2（Store页面）套一个专属的子Stack导航 #

我们需要把Store页面、Products页面、商品详情页都放在同一个子Stack里，这样它们都属于Tab2的上下文，底部Tab就会一直显示。

先新建一个StoreStackNavigator.js文件（或者直接在myBottomTabnavigator.js里写）：

import { createStackNavigator } from '@react-navigation/stack';
import Tab2 from './Tab2'; // 你的Store列表页面
import ProductScreens from './ProductScreens';
import ProductDetailAndPlaceOrder from './ProductDetailAndPlaceOrder';

const StoreStack = createStackNavigator();

export default function StoreStackNavigator() {
  return (
    <StoreStack.Navigator screenOptions={{ headerShown: false }}>
      {/* 把原来的Tab2作为这个子Stack的初始页面 */}
      <StoreStack.Screen name="Store" component={Tab2} />
      {/* 把商品列表和详情页都加到这个子Stack里 */}
      <StoreStack.Screen name="Products" component={ProductScreens} />
      <StoreStack.Screen name="ProductDetailsAndOrder" component={ProductDetailAndPlaceOrder} />
    </StoreStack.Navigator>
  );
}

然后修改myBottomTabnavigator.js里的Tab2配置，把原来的Tab2组件换成这个子Stack：

<Tab.Screen
  name="Tab2"
  component={StoreStackNavigator} // 这里替换成上面的子Stack导航
  options={{
    tabBarVisible: true,
  }}
/>

第二步：清理外层Stack导航的冗余页面 #

现在Products和ProductDetailsAndPlaceOrder已经属于Tab2的子Stack了，外层的App.js里就不需要再保留这两个页面了，删掉它们：

<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} />
  {/* 删掉下面这两行，已经移到Tab2的子Stack里了 */}
  {/* <Stack.Screen name="Products" component={ProductScreens} /> */}
  {/* <Stack.Screen name="ProductDetailsAndOrder" component={ProductDetailAndPlaceOrder} /> */}
</Stack.Navigator>

第三步：修复购物车图标跳转到Tab1的问题 #

现在在ProductDetailAndPlaceOrder页面里，因为我们处于Tab2的子Stack中，直接用navigation.navigate('Tab1')就能跳转到Tab1的Order页面啦，代码不用改太多，确保你的点击事件是这样的：

<TouchableOpacity
  onPress={() => {
    // 直接导航到Tab1，React Navigation会自动找到外层的Tab导航
    navigation.navigate('Tab1');
  }}
>
  {/* 你的购物车图标组件 */}
</TouchableOpacity>

这样调整之后，你从Store页面跳转到商品列表、详情页时，底部Tab会一直保持可见；点击购物车图标也能正常切换到Tab1的Order页面啦！

备注：内容来源于stack exchange，提问作者helloFriend