如何从 React Native 中的子导航器屏幕禁用父堆栈导航器的标题？答案

【问题标题】：How to disable headers of a parent stack navigator from a screen of the child navigator in React Native?如何从 React Native 中的子导航器屏幕禁用父堆栈导航器的标题？
【发布时间】：2022-07-17 12:31:25
【问题描述】：

我正在构建一个 React Native 应用程序，我正在使用 React Navigation，我必须从子导航器的屏幕上禁用父导航器的标题，例如

  Tab Naviagtor A (Headers ON)
    Stack Navigator B (Headers OFF)
      Navigtor B Screens ( A, B, C, D, E)

那么，如何从特定的导航器 A 屏幕（如 C）禁用选项卡导航器 A 的标题。这样，当我导航到屏幕 C 时，我不再看到标题，但能够在 E 等其他屏幕上看到标题和 D。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

这应该可以通过在选项卡导航器上使用这样的路由参数来实现：

<Tab.Navigator
      initialRouteName={"A")}
      screenOptions={({route}) => {
        return {
          headerShown: route.name !== "C",
        };
      }}>

另一个选项是隐藏 Tab Navigator 标题并在您需要的那些屏幕上启用 Stack Navigator 标题。

【讨论】：

我还必须将它与 3 个导航器一起使用，但它不起作用。底部导航器 > 选项卡导航器 > 堆栈导航器 > 屏幕。那么现在我需要做什么？

【解决方案2】：

const StackNavigator = ({ navigation }) => {
  return (
    <Stack.Navigator
      screenOptions={{ headerShown: false }}

    >
      <Stack.Screen
        name="Tabs"
        component={TabNavigator}
        options={({ route }) => ({
          headerTitle: getHeaderTitle(route),
          headerLeft: () => (
            <NavigationHeaderDashboard navigationProps={navigation} position={'Right'} />
          ),
          headerStyle: {
            backgroundColor: '#FFFFFF',
          },
          headerTintColor: '#092241',
          headerTitleStyle: {
            fontWeight: 'bold',
            fontSize: 20,
            alignSelf: 'center',
          },
          headerTitleAlign: "center",
        })}

      />
      <Stack.Screen name="ViewScreen" component={ViewScreen} /> 
    </Stack.Navigator>

  );
};

【讨论】：

【解决方案3】：

我有Drawer (headers ON) -> Tab (headers OFF) -> Screen A, Screen B, Screen C，我想在屏幕 C 中隐藏抽屉标题。这就是我解决问题的方法。

在抽屉导航器上设置一个 id

<Drawer.Navigator
  id='Drawer' // --> 1.
  screenOptions: {{...}}
>
  ...
</Drawer.Navigator>

在 C 的 Tab.Screen 中将“unmountOnBlur”设置为 true

<Tab.Navigator
   screenOptions={{
     headerShown: false,
   }}
>
  // Other screens ...
  <Tab.Screen 
     name='C'
     component={ScreenC}
     options={{
       unmountOnBlur: true, // --> 2.
     }}
  />
</Tab.Navigator>

在 Screen C 组件中，获取父导航器（抽屉）并设置屏幕选项“headerShown: false”

export default function ScreenC({ navigation, route }) {
  React.useLayoutEffect(() => {
    if (!navigation || !route) return

    // Get parent by id
    const drawerNavigator = navigation.getParent('Drawer')

    if (drawerNavigator) {
      // Make sure the route name is C before turn header off
      if (route.name === 'C') { 
        drawerNavigator.setOptions({
          headerShown: false,
        })
      }
    }

    // Turn header back on when unmount
    return drawerNavigator
      ? () => {
          drawerNavigator.setOptions({
            headerShown: true,
          })
        }
      : undefined
  }, [navigation, route])

   return ...
}

希望有帮助

【讨论】：

【解决方案4】：

V0.6

在您的导航器 B 屏幕中，执行以下操作：

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(
        useCallback(() => {
        // Do something when the screen is focused
        props.navigation.getParent().setOptions({ headerShown: false})
        return () => {
            // Do something when the screen is unfocused
            // Useful for cleanup functions
            props.navigation.getParent().setOptions({ headerShown: true})
        };
        }, [])
    )

【讨论】：