如何在两个Stack Navigator页面复用BottomTab组件且避免内容一致？

核心思路是通过给BottomTab传递路由参数，让它根据不同的栈页面（Home/Create）动态调整内容，具体实现步骤如下：

1. 修改Stack.Screen定义，传递差异化参数 #

给两个栈页面分别传递initialParams，指定默认打开的tab和是否为Create场景：

<Stack.Screen name="Home" component={BottomTab}
  options={{title:'Home', headerShown: false}}
  initialParams={{ defaultTab: 'Home', isCreatePage: false }}
/>

<Stack.Screen name='Create' component={BottomTab}
  options={{title:'Create'}}
  initialParams={{ defaultTab: 'Topic', isCreatePage: true }}
/>

2. 改造BottomTab组件，根据参数动态调整 #

在BottomTab中接收路由参数，动态修改默认显示的tab和Topic对应的组件：

function BottomTab({ route }) {
  // 获取传递的参数，默认值兜底
  const { defaultTab = 'Home', isCreatePage = false } = route.params || {};
  // 动态切换Topic页的组件：Create页用Create组件，否则用EmptyScreen
  const TopicTargetComponent = isCreatePage ? Create : EmptyScreen;

  return (
    <Tab.Navigator
      // 设置默认打开的tab
      initialRouteName={defaultTab}
      screenOptions={{
        headerShown: false,
        labelStyle: {fontSize:18},
        activeTintColor: 'green',
        tabBarVisible:false,
        tabBarShowLabel: false,
      }}
    >
      {/* Home Tab - 保持不变 */}
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name={focused ? "home" : "home-outline"}
              size={20}
              color={focused ? "black" : "#748c94"}
              type={'Ionicons'}
            />
          )
        }}
      />

      {/* Search Tab - 保持不变 */}
      <Tab.Screen
        name="Search"
        component={Search} 
        options={{
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name={focused ? "search" : "search-outline"}
              size={20}
              color={focused ? "black" : "#748c94"}
              type={'Ionicons'}
            />          
          )
        }} 
      />
      
      {/* Topic Tab - 动态替换组件 */}
      <Tab.Screen
        name="Topic"
        component={TopicTargetComponent}
        options={{
          tabBarIcon: ({ focused }) => (
            <TouchableHighlight onPress={() => console.log('HHH')} underlayColor="white" activeOpacity={1}>
              <View 
                style={{
                  width: 80,
                  height: 80,
                  backgroundColor: 'white',
                  borderRadius: 50,
                  justifyContent: 'center',
                  alignItems: 'center'
                }}>
                <AddButton/>
              </View>
            </TouchableHighlight>
          )
        }}  
      />

      {/* Notification Tab - 保持不变 */}
      <Tab.Screen
        name="Notification"
        component={Notification}
        options={{
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name={focused ? "notifications" : "notifications-outline"}
              size={20}
              color={focused ? "black" : "#748c94"}
              type={'Ionicons'}
            />          
          )
        }}  
      />

      {/* Message Tab - 保持不变 */}
      <Tab.Screen
        name="Message"
        component={Message}
        options={{
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name={focused ? "mail" : "mail-outline"}
              size={20}
              color={focused ? "black" : "#748c94"}
              type={'Ionicons'}
            />          
          )
        }}  
      />
    </Tab.Navigator>  
  );
}

效果说明 #

• 进入Home栈页面时，BottomTab默认打开Home组件，Topic tab仍显示EmptyScreen
• 进入Create栈页面时，BottomTab默认打开Topic对应的Create组件，其他tab功能保持正常

内容的提问来源于stack exchange，提问作者Samuel