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 }) {

   useEffect(() => {

    if (route.state?.index) {

      navigation.setOptions({

        tabBarVisible: false,

      });

    } else {

      navigation.setOptions({

        tabBarVisible: true,

      });

    }

  }, [navigation, route.state?.index]);

return <Stack.Navigator> ... </Stack.Navigator>

}

这将仅显示第一个堆栈屏幕上的底部选项卡。

更新 Nov 17 2020

使用隐藏底部选项卡，此示例仅在和屏幕上显示底部选项卡。getFocusedRouteNameFromRouteAuthSettings

  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Auth';

  useEffect(() => {

    navigation.setOptions({

      tabBarVisible: ['Auth', 'Settings'].includes(routeName),

    });

  }, [navigation, routeName]);

为什么不是第一个解决方案断续器

上面的解决方案根据渲染隐藏屏幕上的底部选项卡 如果您有并行导航路线，则可以使用上述解决方案。route.state.index

假设您有两个选项卡导航 用户堆栈和主页堆栈，在用户堆栈上，您有两个屏幕 配置文件和设置，如果要隐藏设置屏幕上的底部栏，您将使用上述工作正常的解决方案 但是当您直接从主页导航到用户设置屏幕时，底部选项卡栏显示在“设置”屏幕上并隐藏在“配置文件”屏幕上， 发生这种情况是因为“设置”屏幕是 和“配置文件”屏幕是 。route.state.index01

Answer 2

就像你提到的，如果你只希望每个堆栈中的第一个屏幕显示底部标签栏，那么我建议你使用第二种方法。创建一个基本堆栈导航器，第一个屏幕是选项卡导航器本身：

const TabScreens = ({navigation}) => { // Tab navigator with only the screens that require bottom tab bar

  return (

    <Tab.Navigator

      initialRouteName="Home"

      tabBarOptions={{

        activeTintColor: '#e91e63',

      }}>

      <Tab.Screen

        name="Home"

        component={Home}

        options={{

          tabBarLabel: 'Home',

        }}

      />

      <Tab.Screen

        name="Welcome"

        component={Welcome}

        options={{

          tabBarLabel: 'Welcome',

        }}

      />

    </Tab.Navigator>

  );

};

创建选项卡导航器后，在主渲染器中使用：

    <NavigationContainer>

      <Stack.Navigator>

        <Stack.Screen

          name="Stack"

          component={TabScreens}

        />

        <Stack.Screen             // Add any number of extra screens that do not require the bottom tab here

         name="Other screen 1"

         component={OtherScreen1} />

        <Stack.Screen             

         name="Other screen 2"

         component={OtherScreen2} />

      </Stack.Navigator>

    </NavigationContainer>

这样，您就不必摆弄底部选项卡组件。您还可以在基本堆栈导航器的一部分和属于 Tab 导航器的任何屏幕之间来回导航。这里唯一需要注意的是，每次导航时，除了选项卡导航器中的屏幕之外的所有屏幕都将被安装和卸载。

Answer 3

简单的方法

  options={{ 
         tabBarVisible: false,
      }}