React Native如何仅在内部堆栈内的某些屏幕上隐藏抽屉导航标题？

Question

我的应用程序中有一个抽屉式导航，其中包含多个组件/屏幕，其中一个组件是也包含多个屏幕的堆栈导航，问题是我想仅在内部堆栈的某个屏幕上隐藏抽屉标题，并且继续在堆栈的其他屏幕上显示它。我的代码是这样的

抽屉

          <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home" >
              <Drawer.Screen name="main" component={MyStack} /> //this is the inner stack
              <Drawer.Screen name="track" component={ProgressTrackerScreen} />
              <Drawer.Screen name="reminder" component={DailyReminderScreen} />
              <Drawer.Screen name="bookmarks" component={BookmarksScreen} />
            </Drawer.Navigator>
          </NavigationContainer>

堆

    <Stack.Navigator initialRouteName="MainScreen" screenOptions={{
      headerTitleAlign: "right",
      header: () => null
    }} >
      <Stack.Screen name="MainScreen" component={MainScreen} options={{
          title: 'Main', //i want an option here to hide the drawer nav header on this screen only
        }} />
      <Stack.Screen name="page" component={Page} />
    </Stack.Navigator>

如何才能实现这一目标？

Answer 1

您可以使用navigation.getParent()它的方法。首先，您需要像这样对堆栈进行更改，

    <Stack.Navigator initialRouteName="MainScreen" screenOptions={{
      headerTitleAlign: "right",
      headerShown: false,
    }}>
      <Stack.Screen name="MainScreen" component={MainScreen} options={{
          title: 'Main', //i want an option here to hide the drawer nav header on this screen only
          headerShown: true,
        }} />
      <Stack.Screen name="page" component={Page} />
    </Stack.Navigator>

之后，您可以像这样删除屏幕中的抽屉导航标题栏，我假设您正在使用功能组件，

MainScreen.js/MainScreen.tsx

 const navigation = useNavigation();
 useEffect(() => {
    navigation.getParent()?.setOptions({
      headerShown: false,
    });
    return () =>
      navigation.getParent()?.setOptions({
        headerShown: true,
      });
  }, [navigation]);

这是我的工作，希望对你有帮助。