React Navigation TabBar问题：跳转后保持Home标签选中并显示TabBar

嘿，这个需求我之前也碰到过！其实核心就是调整你的导航嵌套结构，让要跳转的First Screen、Second Screen成为Home标签页的子页面，而不是和TabBar同级的独立页面。这样跳转时TabBar会一直显示，Home图标也会保持选中状态。

下面给你一步步拆解实现方法：

1. 正确的导航嵌套逻辑 #

你需要把Home页面和它的子页面（First/Second Screen）放在一个Stack导航器里，然后把这个Stack作为底部Tab导航器的一个标签项。这样所有Home下的子页面都会共享TabBar，并且Home标签始终处于激活状态。

2. 完整代码示例 #

假设你用的是React Navigation 6+版本，代码大概是这样的：

首先导入所需的依赖：

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
// 导入你的页面组件
import HomeScreen from './screens/HomeScreen';
import FirstScreen from './screens/FirstScreen';
import SecondScreen from './screens/SecondScreen';
import OtherTabScreen from './screens/OtherTabScreen'; // 其他Tab页面示例

然后创建Home的子Stack导航器：

const HomeStack = createStackNavigator();

function HomeStackNavigator() {
  return (
    <HomeStack.Navigator>
      {/* Home作为Stack的初始页面 */}
      <HomeStack.Screen name="Home" component={HomeScreen} />
      {/* 把需要跳转的页面作为Home Stack的子页面 */}
      <HomeStack.Screen name="FirstScreen" component={FirstScreen} />
      <HomeStack.Screen name="SecondScreen" component={SecondScreen} />
    </HomeStack.Navigator>
  );
}

接着创建底部Tab导航器，把HomeStack作为其中一个Tab项：

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        {/* 这里放Home的Stack导航器，而不是单独的Home页面 */}
        <Tab.Screen name="HomeTab" component={HomeStackNavigator} options={{ title: 'Home' }} />
        {/* 其他Tab项正常配置 */}
        <Tab.Screen name="OtherTab" component={OtherTabScreen} options={{ title: 'Other' }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

3. 在Home页面中跳转 #

现在你在HomeScreen里，只需要用普通的navigate方法跳转到子页面即可：

// HomeScreen.js
import { Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <>
      <Button title="去First Screen" onPress={() => navigation.navigate('FirstScreen')} />
      <Button title="去Second Screen" onPress={() => navigation.navigate('SecondScreen')} />
    </>
  );
}

这样跳转后，底部TabBar会一直显示，Home图标也会保持选中状态，完全符合你的需求！

4. 常见坑点提醒 #

• 不要把First/Second Screen直接放在Tab导航器里，否则跳转过去会切换到新的Tab，Home图标就不会选中了。
• 如果需要从子页面（比如FirstScreen）跳回Home，直接用navigation.navigate('Home')即可，不需要额外操作。
• 如果你的TabBar有自定义样式，不用担心，嵌套结构不会影响TabBar的样式配置，该怎么自定义还是怎么来。

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