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

Question

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

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

那么我如何禁用标题在标签导航器A，从一个特定的导航器A屏幕，如C，所以当我导航到屏幕C，我不再看到标题，但将能够看到标题在其他屏幕，如E和d

Answer 1

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

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

另一个选择是隐藏标签导航头，在你需要的屏幕上启用堆栈导航头。

Answer 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>
);
};

Answer 3

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

1. 设置抽屉导航器的id

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

2. 屏幕C集" unmountonblurquot;真正的

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

3. 在Screen C组件中，获取父导航器(抽屉)并设置屏幕选项" headerdisplays: 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 ...
}

希望对您有所帮助

Answer 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})
};
}, [])
)

Answer 5

我确实根据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