对某些屏幕的反应导航隐藏标题图标

Question

我使用底部标签栏，对于第一个屏幕，我不想显示“回到”按钮图标。

我在标签顶部使用了标头

。

const AccountStack = ({navigation}) => {
  return (
    <>
      <View>
        <Icon                // this the back button 
          name="chevron-left"
          type="font-awesome"
          color={'#ffffff'}
          onPress={() => {
            navigation.pop();
          }}
        />
        <Image
          style={{height: 30, width: 170}}
          source={require('./src/assets/logo-white.png')}
        />
      </View>
      <Tab.Navigator
        initialRouteName={'WinterStack'}
        screenOptions={{
          headerShown: false,
          tabBarShowLabel: true,
          animation: 'fade',
        }}>
        <Tab.Screen
          name="WinterStack"
          component={WinterStack}/>

        <Tab.Screen
          name="SummerStack"
          component={SummerStack}/>

        <Tab.Screen
          name="SettingsStack"
          component={SettingsStack}/>
      </Tab.Navigator>
    </>
  );
};

Answer 1

您可以在选项卡上的“ screenoptions”上的“ screenoptions”上的标题内的后按钮放置视图。Navigator，然后在选项卡上设置“标题：false”。屏幕上的屏幕不显示所需的屏幕上的标题。

<Tab.Navigator
    initialRouteName={'WinterStack'}
    screenOptions={{
      header:()=> `ENTER YOUR VIEW HERE`,
      headerShown: true,
      tabBarShowLabel: true,
      animation: 'fade',
    }}>
    <Tab.Screen
      name="WinterStack"
      component={WinterStack}
      options={{
        headerShown:false,
      }}
      />