React Native导航头部右侧按钮异常：仅需在VehiclesScreen显示加号按钮

问题出在你把加号按钮放在了Drawer导航器的VehiclesScreenStack页面头部，而VehiclesScreenStack是嵌套的栈导航器。当你跳转到AddVehicleScreen时，Drawer的头部并不会消失，所以按钮会一直显示。

要解决这个问题，需要把加号按钮移到嵌套栈内部的VehiclesScreen页面头部，让嵌套栈自己管理头部显示：

修改步骤： #

1. 调整VehiclesScreenStack的配置，开启头部显示，并把加号按钮放到VehiclesScreen的headerRight中：

const VehiclesScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="VehiclesScreen"
      screenOptions={{ 
        headerShown: true,
        headerStyle: { backgroundColor: '#f4511e' },
        headerTintColor: '#fff'
      }}>
      <Stack.Screen
        name="VehiclesScreen"
        component={VehiclesScreen}
        options={({ navigation }) => ({
          title: 'Vehicles',
          headerRight: () => (
            <TouchableHighlight
              onPress={() => {
                console.log('Add vehicle pressed');
                navigation.navigate('AddVehicleScreen');
              }}
              underlayColor={'transparent'}>
              <FontAwesomeIcon
                icon={faPlus}
                size={20}
                style={{ marginEnd: 11 }}
                color={'#fff'}
              />
            </TouchableHighlight>
          ),
        })}
      />
      <Stack.Screen
        name="AddVehicleScreen"
        component={AddVehicleScreen}
        options={{
          title: 'Add Vehicle',
          // 若不需要AddVehicleScreen的头部，可设置headerShown: false
        }}
      />
    </Stack.Navigator>
  );
};

2. 修改App组件中Drawer.Screen的VehiclesScreenStack配置，隐藏Drawer的头部，避免和嵌套栈的头部重复：

<Drawer.Screen
  name="VehiclesScreenStack"
  options={{
    drawerLabel: 'Vehicles',
    // 隐藏Drawer的头部，让嵌套栈自主管理头部
    headerShown: false,
  }}
  component={VehiclesScreenStack}
/>

这样修改后，只有VehiclesScreen页面会显示加号按钮，跳转到AddVehicleScreen时，嵌套栈会替换头部内容（或隐藏头部），加号按钮就不会再出现了。

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