我有一個帶有底部欄的應用程式，我想從其中一個沒有底部選項卡的情況下顯示一個模態螢屏。我不明白為什么它在 iOS 上按預期作業，但在 Android 上卻沒有。
這是我的底部選項卡導航器，其中包含我的所有選項卡：
// AppStack.tsx
const Tab = createBottomTabNavigator()
const AppStack = () => {
return (
<Tab.Navigator initialRouteName="homeStack" >
<Tab.Screen name="homeStack" component={HomeStack} />
...
</Tab.Navigator>
)
}
這是包含多個螢屏的堆疊導航器，但也包含一個應以模態呈現的螢屏（因此沒有底部欄）。
// HomeStack.tsx
const Stack = createNativeStackNavigator()
const HomeStack = () => {
return (
<Stack.Navigator initialRouteName="home">
<Stack.Screen name="home" component={HomeScreen} />
...
<Stack.Screen
name="addStuff"
component={StuffStack}
options={{
presentation: 'fullScreenModal',
}}
/>
</Stack.Navigator>
)
}
addStuff從HomeStack的螢屏之一顯示模態螢屏在 iOS 上按預期作業：不顯示底部欄。但是在Android上，底部欄仍然存在......
// HomeScreen.tsx
navigation.navigate('addStuff')
有沒有人知道如何告訴 react-navigation 不要在這個模態螢屏上添加這個底部欄？
uj5u.com熱心網友回復：
您可以創建條件規則來檢查螢屏名稱。
為此，您需要獲取導航道具（存在于您的HomeStack）并使用該getFocusedRouteNameFromRoute方法獲取當前螢屏名稱：
import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
// rest of the codes ...
const HomeStack = ({route, navigation}) => {
React.useLayoutEffect(() => {
const routeName = getFocusedRouteNameFromRoute(route);
if (routeName === 'addStuff') {
navigation.setOptions({tabBarVisible: false});
} else {
navigation.setOptions({tabBarVisible: true});
}
}, [navigation, route]);
return (
<Stack.Navigator initialRouteName="home">
<Stack.Screen name="home" component={HomeScreen} />
// rest of the codes ...
<Stack.Screen
name="addStuff"
component={StuffStack}
options={{
presentation: 'fullScreenModal',
}}
/>
</Stack.Navigator>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/353525.html