如何使用反应导航删除双标头？答案

【问题标题】：How to remove double header with react-navigation?如何使用反应导航删除双标头？
【发布时间】：2020-03-24 21:27:07
【问题描述】：

我的 React Native 0.61.5 使用 react-navigation 5.1。这是根导航代码：

const BTab = createBottomTabNavigator();
const Stack = createStackNavigator();
export default function App() {

  //const Appscreen = () => (<AppScreen data={data}/>);

  return (
    <NavigationContainer>
      <Stack.Navigator InitialRouteName="Splash">
        <Stack.Screen name="Splash" component={SplashScreen}}/>
        <Stack.Screen name="App" component={AppScreen} } />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

组件AppScreen返回一个这样的堆栈：

return (
    <NavigationContainer independent={true}>
      <BTab.Navigator>
          <BTab.Screen name="Event" component={Eventstack} />
          <BTab.Screen name="Group" component={Groupstack} />
          <BTab.Screen name="Contact" component={Contactstack} />
      </BTab.Navigator>
    </NavigationContainer>
  );

我注意到屏幕上有双标题：

如何删除App 标头而只保留Group？

【问题讨论】：

与您的问题无关，但删除NavigationContainer indepenent={true}。您应该在应用程序的根目录中只使用一个 NavigationContainer。另一个问题是您在App 组件内定义了AppScreen。你需要把它移到外面。
同意，我添加了第二个 NavigationContainer 以查看额外的标题是否消失。您是说将 AppScreen 作为单独的功能组件吗？ SplashScreen 仅用于检索需要异步的数据。 App 组件看起来有点别扭。

标签： react-navigation react-navigation-stack react-navigation-v5

【解决方案1】：

添加要隐藏标题的屏幕。

options= {{
  headerShown: false
}}

如需进一步阅读，请查看https://reactnavigation.org/docs/stack-navigator/#headershown

【讨论】：