React Native中如何移除额外的顶部导航栏？

排查隐式导航容器 #

• 检查项目入口文件（如App.js）、首页组件home.js，确认没有第三方库或模板代码隐式添加了NavigationContainer，部分Expo模板会默认在App.js中包含导航容器。
• 执行缓存重置命令清除可能的缓存冲突：

  npx react-native start --reset-cache
  

关闭默认导航栏，保留自定义Group导航 #

在Stack Navigator配置中全局关闭默认导航栏，仅在Group中启用自定义样式，消除名为“index”的多余导航栏：

// index.js 示例代码
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './home';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Group screenOptions={{ /* 你的自定义导航栏样式 */ }}>
          <Stack.Screen 
            name="Home" 
            component={Home} 
            options={{ headerTitle: '首页' }}
          />
          {/* 其他页面组件 */}
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

• screenOptions={{ headerShown: false }}会全局禁用Stack Navigator的默认导航栏，彻底移除多余的“index”导航栏。
• 自定义导航栏样式放在Stack.Group的screenOptions中，确保只有Group内的页面使用你定义的导航栏。

解决independent={true}移除后的报错 #

• 若确认仅存在一个NavigationContainer，报错大概率是缓存或编译残留导致，执行上述缓存重置命令后重新运行项目。
• 检查子组件（如home.js）是否嵌套了导航相关容器，比如不小心在首页中添加了NavigationContainer或其他导航组件。

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