如何在React Native中从子导航器的屏幕中禁用父堆栈导航器的头部?

gg58donl  于 2023-03-31  发布在  React
关注(0)|答案(5)|浏览(180)

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

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

那么我如何禁用标签导航器A的标题,从一个特定的导航器A屏幕,如C.这样当我导航到屏幕C我不再看到标题,但将能够看到其他屏幕上的标题,如E和D.

rqenqsqc

rqenqsqc1#

这应该可以通过在Tab导航器上使用如下路由参数来实现:

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

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

beq87vna

beq87vna2#

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>

  );
};
dgtucam1

dgtucam13#

我有Drawer (headers ON) -> Tab (headers OFF) -> Screen A, Screen B, Screen C,我想隐藏屏幕C中的抽屉标题。这就是我解决问题的方法。
1.在抽屉导航器上设置id

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

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

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

1.在屏幕C组件中,获取父导航器(抽屉)并设置屏幕选项“headerShown:假”

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 ...
}

希望这能有所帮助

qvsjd97n

qvsjd97n4#

版本0.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})
        };
        }, [])
    )
vu8f3i0k

vu8f3i0k5#

我确实根据alvAro365的答案解决了这个问题,但使用了部分文档。

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
    
export const homeOptions = ({ route }) => {
 const routeName = getFocusedRouteNameFromRoute(route)
 return {
  headerShown: routeName !== "PackagesStack"
    }
}

https://reactnavigation.org/docs/screen-options-resolution

相关问题