如何在模式屏幕上隐藏底部栏

Question

我有一个带底部栏的应用程序，我想在其中一个中显示一个模式屏幕，而底部选项卡没有。我不明白为什么它在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>
)
}

从HomeStack的一个屏幕上呈现addStuff模式屏幕在iOS上可以正常工作：底部栏没有显示。但在安卓系统上，底部栏仍然存在。。。

// HomeScreen.tsx
navigation.navigate('addStuff')

有人知道如何告诉react导航不要在这个模式屏幕上添加这个底部栏吗？

Answer 1

您可以创建条件规则来检查屏幕名称。

为了实现这一点，您需要获得导航道具(存在于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>
)
}