我有一個BottomTab嵌套在Stsck導航器中的導航器。并且標頭是通過 Stack 配置的screenOptions：
function AppStackNavigator() {
return (
<Stack.Navigator screenOptions={getScreenOptions}>
<Stack.Screen name="BottomTab" component={BottomTabNavigator}/>
...
</Stack.Navigator>
)
const getScreenOptions = ({route, navigation}) => {
// crazy logic ...
return {
headerLeft: getHeaderLeft,
headerRight: getHeaderRight,
...
}
}
}
在BottomTaB導航器中，我有一個名為Target. 請注意，headerShown設定為false此處。
function BottomTabNavigators() {
return (
<Tab.Navigator
screenOptions={{headerShown: false}}
tabBar={props => <MyTabBar {...props}/>}
>
<Tab.Screen name="Target" component={TargetScreen}/>
</Tab.Navigator>
)
}
在目標螢屏，我重寫headerRight了的家長導航，因為我需要頭和方法（之間的直接互動methodThatIsOnlyAccessableHere），這僅僅是這個畫面里面訪問：
function TargetScreen() {
const methodThatIsOnlyAccessableHere = () => { ... }
useLayoutEffect(() => {
const getHeaderRight = () => {
// call methodThatIsOnlyAccessableHere
...
}
const parentNavigator = navigation.getParent()
parentNavigator.setOptions({
headerRight: getHeaderRight,
})
}, [navigation])
}
當前行為：
頂級標題配置（screenOptions在堆疊導航器中）運行良好。導航到Target螢屏時，覆寫的標題配置（使用setOptions ）將變為活動狀態。然而，當離開這個螢屏時，這個被覆寫的配置仍然保持活動狀態（不良行為）
期望的行為
離開Target螢屏時，頂級標題配置應變為活動狀態，而覆寫的配置應變為無效。
為什么這是我的設計選擇？
我總是隱藏嵌套的導航器標題（導航器的標題BottomTab）并Stack根據子導航器的狀態配置頂級（父）導航器標題（導航器）。我無法將Target screen的標題配置移動到父級，因為在這種情況下我將無法訪問methodThatIsOnlyAccessableHere.
uj5u.com熱心網友回復：
您將需要headerRight再次更新。例如：使用useLayoutEffect鉤子的清理。
useLayoutEffect(() => {
const getHeaderRight = () => {
// call methodThatIsOnlyAccessableHere
...
}
const parentNavigator = navigation.getParent()
parentNavigator.setOptions({
headerRight: getHeaderRight,
})
// cleanup
return () => {
parentNavigator.setOptions({
headerRight: null
})
}
}, [navigation])
uj5u.com熱心網友回復：
我假設您的 TargetScreen 函式為每個路由呼叫運行，以盡可能覆寫父元素。如果為 true，您可以在 useLayoutEffect 鉤子開始時重置選項，并且再次假設您的 getParent() 呼叫檢查您正在訪問的頁面型別，只要效果被呼叫，它就會重置當前頁面導航，而不會影響其覆寫稱呼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/367194.html
標籤：javascript 反应原生 导航 反应导航
上一篇：無法滾動ReactNative
下一篇：<Buttontext="轉到第2頁"onPress={()=>navigation.navigate("page_2")}/>