React 导航 V5 在特定屏幕中隐藏底部选项卡

Question

我正在使用 React Navigation 版本 5 创建一个 React Native 应用程序，并且我有一个底部选项卡导航器，其中堆栈导航器嵌套在选项卡导航器的每个屏幕中。我只希望底部选项卡栏在每个堆栈导航器的第一页上显示。下面是一个零食，显示我的应用的基本导航功能：https://snack.expo.io/@brforest/hide-tab-1。根据底部选项卡文档，有一个选项卡Bar可见选项属性，但是：

隐藏选项卡栏可能会导致故障和跳跃行为。我们建议改用堆栈导航器内的选项卡导航器。

此处提供了在堆栈导航器中嵌套选项卡导航器的指南。我尝试使用此方法，但只有当我只有一个堆栈导航器时，我才能使其工作，但我需要为每个选项卡屏幕提供一个堆栈导航器。以下是我（不成功）尝试在上一个零食中的同一应用程序上使用此方法：https://snack.expo.io/@brforest/hide-tab-2。在这里，我在单个堆栈导航器中嵌套了多个选项卡导航器，以尝试推断文档中建议的方法。正如您在此小吃中看到的那样，堆栈中的导航不再有效，但选项卡仍然有效。

对我来说，将堆栈导航器嵌套在选项卡导航器中（就像我在第一个零食中所做的那样）比尝试将同一选项卡导航器嵌套在大型堆栈导航器中更有意义。但是，我想按照文档进行操作，并找到一种不会导致“故障和跳跃行为”的方法。关于如何实现所需的导航功能的任何建议？

谢谢！

Answer 1

通过互联网后，我找到了自己的方法来隐藏特定堆栈屏幕中的底部选项卡。export default function SignStack({ navigation, route }) {&nbsp; &nbsp;useEffect(() => {&nbsp; &nbsp; if (route.state?.index) {&nbsp; &nbsp; &nbsp; navigation.setOptions({&nbsp; &nbsp; &nbsp; &nbsp; tabBarVisible: false,&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; navigation.setOptions({&nbsp; &nbsp; &nbsp; &nbsp; tabBarVisible: true,&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }, [navigation, route.state?.index]);return <Stack.Navigator> ... </Stack.Navigator>}这将仅显示第一个堆栈屏幕上的底部选项卡。更新 Nov 17 2020使用隐藏底部选项卡，此示例仅在和屏幕上显示底部选项卡。getFocusedRouteNameFromRouteAuthSettings&nbsp; const routeName = getFocusedRouteNameFromRoute(route) ?? 'Auth';&nbsp; useEffect(() => {&nbsp; &nbsp; navigation.setOptions({&nbsp; &nbsp; &nbsp; tabBarVisible: ['Auth', 'Settings'].includes(routeName),&nbsp; &nbsp; });&nbsp; }, [navigation, routeName]);为什么不是第一个解决方案断续器上面的解决方案根据渲染隐藏屏幕上的底部选项卡 如果您有并行导航路线，则可以使用上述解决方案。route.state.index假设您有两个选项卡导航 用户堆栈和主页堆栈，在用户堆栈上，您有两个屏幕 配置文件和设置，如果要隐藏设置屏幕上的底部栏，您将使用上述工作正常的解决方案 但是当您直接从主页导航到用户设置屏幕时，底部选项卡栏显示在“设置”屏幕上并隐藏在“配置文件”屏幕上， 发生这种情况是因为“设置”屏幕是 和“配置文件”屏幕是 。route.state.index01

Answer 2

就像你提到的，如果你只希望每个堆栈中的第一个屏幕显示底部标签栏，那么我建议你使用第二种方法。创建一个基本堆栈导航器，第一个屏幕是选项卡导航器本身：const TabScreens = ({navigation}) => { // Tab navigator with only the screens that require bottom tab bar&nbsp; return (&nbsp; &nbsp; <Tab.Navigator&nbsp; &nbsp; &nbsp; initialRouteName="Home"&nbsp; &nbsp; &nbsp; tabBarOptions={{&nbsp; &nbsp; &nbsp; &nbsp; activeTintColor: '#e91e63',&nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; <Tab.Screen&nbsp; &nbsp; &nbsp; &nbsp; name="Home"&nbsp; &nbsp; &nbsp; &nbsp; component={Home}&nbsp; &nbsp; &nbsp; &nbsp; options={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabBarLabel: 'Home',&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <Tab.Screen&nbsp; &nbsp; &nbsp; &nbsp; name="Welcome"&nbsp; &nbsp; &nbsp; &nbsp; component={Welcome}&nbsp; &nbsp; &nbsp; &nbsp; options={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabBarLabel: 'Welcome',&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </Tab.Navigator>&nbsp; );};创建选项卡导航器后，在主渲染器中使用：&nbsp; &nbsp; <NavigationContainer>&nbsp; &nbsp; &nbsp; <Stack.Navigator>&nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Stack"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={TabScreens}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Add any number of extra screens that do not require the bottom tab here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name="Other screen 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;component={OtherScreen1} />&nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name="Other screen 2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;component={OtherScreen2} />&nbsp; &nbsp; &nbsp; </Stack.Navigator>&nbsp; &nbsp; </NavigationContainer>这样，您就不必摆弄底部选项卡组件。您还可以在基本堆栈导航器的一部分和属于 Tab 导航器的任何屏幕之间来回导航。这里唯一需要注意的是，每次导航时，除了选项卡导航器中的屏幕之外的所有屏幕都将被安装和卸载。

Answer 3

简单的方法&nbsp;&nbsp;options={{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabBarVisible:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}