React Native使用React Navigation出现双Header问题求助

问题原因 #

你在Tab导航器的每个标签页中都嵌套了Stack导航器，而Tab导航器的每个Screen默认会自动渲染Header，同时内部Stack导航器的首个Screen也会生成自己的Header，两者叠加就出现了双Header的情况。

解决方案 #

推荐采用第一种方法，让内部Stack导航器统一管理页面导航的Header，避免逻辑混乱。

方法1：隐藏Tab导航器的Header

在Tab.Navigator的screenOptions中添加headerShown: false，直接禁用Tab导航器自带的Header：

<Tab.Navigator
  screenOptions={({ route }) => ({
    headerShown: false, // 新增此行，隐藏Tab导航器的Header
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;
      if (route.name === "ホーム") {
        iconName = focused ? "ios-home" : "ios-home";
      } else if (route.name === "あとで読む") {
        iconName = focused ? "ios-pricetag" : "ios-pricetag";
      } else if (route.name === "メモ") {
        iconName = focused ? "md-document" : "md-document";
      }
      return <Ionicons name={iconName} size={size} color={color} />;
    },
  })}
  tabBarOptions={{
    activeTintColor: "tomato",
    inactiveTintColor: "gray",
  }}
>
  <Tab.Screen name="ホーム" component={Home} />
  <Tab.Screen name="あとで読む" component={ReadLater} />
  <Tab.Screen name="メモ" component={Memo} />
</Tab.Navigator>

方法2：隐藏内部Stack导航器的初始页面Header

如果需要保留Tab导航器的Header（不推荐，易导致导航逻辑混乱），可以在每个Stack导航器的首个Screen中设置headerShown: false：

const Home = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="ホーム" 
        component={HomeScreen} 
        options={{ headerShown: false }} // 隐藏当前页面的Header
      />
      <Stack.Screen name="詳細" component={DetailsScreen} />
    </Stack.Navigator>
  );
};

额外代码优化 #

你的Tab导航器icon逻辑中有重复的Settings判断分支，可以删除这些冗余代码，让结构更清晰。

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