为什么我的 React Native 导航标题右侧无法正常工作

Question

首先抱歉，因为我是 React Native 的新手。 我正在尝试使用 React Native 创建一个应用程序，并且我有这个 App.tsx （我正在使用打字稿） 当我按加号图标时，一切正常，我被重定向到“AddVehicleScreen”，但问题是，当我在该屏幕中时，加号按钮也在这里，我只想在车辆屏幕中显示该图标，而不是在添加车辆屏幕

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const BottomTabStack = () => {
  return (
    <Tab.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{headerShown: false}}>
      <Tab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home Screen',
          /*tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name="home"
              color={color}
              size={size}
            />
          ),*/
        }}
      />
      <Tab.Screen
        name="ExploreScreen"
        component={ExploreScreen}
        options={{
          tabBarLabel: 'Explore Screen',
          /*tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name="settings"
              color={color}
              size={size}
            />
          ),*/
        }}
      />
    </Tab.Navigator>
  );
};

const HomeScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="BottomTabStack" component={BottomTabStack} />
    </Stack.Navigator>
  );
};

const SettingScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="SecondPage"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="SettingScreen" component={SettingScreen} />
    </Stack.Navigator>
  );
};

const VehiclesScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="VehiclesScreen"
      screenOptions={{ headerShown: false }}>
      <Stack.Screen
        name="VehiclesScreen"
        component={VehiclesScreen}
        options={({ navigation }) => ({
          drawerLabel: 'Vehicles',
          title: 'Vehicles',
        })}
      />
      <Stack.Screen
        name="AddVehicleScreen"
        component={AddVehicleScreen}
        options={{
          headerRight: () => null,
          headerShown: false
        }}
      />
    </Stack.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        screenOptions={{
          headerShown: true,
          headerStyle: {
            backgroundColor: '#f4511e', //Set Header color
          },
          headerTintColor: '#fff', //Set Header text color
        }}>
        <Drawer.Screen
          name="HomeScreenStack"
          options={{
            drawerLabel: 'Home Screen Option',
            title: 'Home Screen',
          }}
          component={HomeScreenStack}
        />
        <Drawer.Screen
          name="SettingScreenStack"
          options={{
            drawerLabel: 'Setting Screen Option',
            title: 'Setting Screen',
          }}
          component={SettingScreenStack}
        />
        <Drawer.Screen
          name="VehiclesScreenStack"
          options={({ navigation }) => ({
            drawerLabel: 'Vehicles',
            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>
            ),
          })}
          component={VehiclesScreenStack}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

`

Answer 1

问题在于您正在为抽屉内的整个堆栈组设置加号图标。要解决此问题，您需要为仅需要的堆栈设置标头，如下所示

const VehiclesScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="VehiclesScreen"
      screenOptions={{ headerShown: false }}>
      <Stack.Screen
        name="VehiclesScreen"
        component={VehiclesScreen}
        options={({ navigation }) => ({
          drawerLabel: 'Vehicles',
          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={{
          headerRight: () => null,
          headerShown: false
        }}
      />
    </Stack.Navigator>
  );
};

希望这对您有帮助：D