可以在嵌套在选项卡中的堆栈中隐藏屏幕上的选项卡导航器吗？

Question

我有一个堆栈导航器，其中有一些屏幕和一个初始路径，例如“个人资料”，当我通过“个人资料”屏幕导航到“选项”时navigation.navigate("Options")，我不想看到底部选项卡。这是我所拥有的示例：

ProfileNav.js

export default function ProfileNav () {
   return (
      <Stack.Navigator initialRoutName="Profile">
         <Stack.Screen name="Profile" component={ProfileScreen}>
         <Stack.Screen name="Options" component={OptionsScreen}>
      </Stack.Navigator>
   );
};

TabNav.js

export default function TabNav () {
   return (
      <Tab.Navigator initialRouteName="Home">
         <Tab.Screen name="Home" component={HomeScreen}>
         <Tab.Screen name="ProfileNav" component={ProfileNav}>
      </Tab.Navigator>
   );
};

我正在使用 React Navigation v6。我已经看到特定屏幕中的隐藏选项卡栏文档描述了如何交换屏幕以实现从单个屏幕隐藏选项卡，但在这种情况下，我试图让堆栈的父屏幕ProfileNav仍然显示底部选项卡，但我不希望堆栈中的其余屏幕显示它们，这不是文档帮助实现的目标，除非我错过了一些东西。

那么，如何从嵌套在选项卡导航器中的堆栈导航器的选择屏幕中隐藏底部选项卡呢？

我也尝试过tabBarVisible进入“选项”屏幕选项，但这不起作用。

Answer 1

您可以将 传递navigationContainerRef给并通过 组件中的NavigationContainer获取当前路线名称，以便隐藏由不同导航器处理的特定屏幕的选项卡栏。getCurrentRouteTabNav

然后，将路线名称作为状态传递给选项卡导航器，并决定哪些屏幕显示选项卡栏，哪些不显示选项卡栏。

在这种情况下，您只想显示TabBar路线的Profile。这是一个最小的工作示例。

import React, {useState} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import { createNavigationContainerRef } from "@react-navigation/native"

const Stack = createNativeStackNavigator()

function ProfileNav () {
   return (
      <Stack.Navigator initialRoutName="Profile">
         <Stack.Screen name="Profile" component={ProfileScreen} />
         <Stack.Screen name="Options" component={OptionsScreen} />
      </Stack.Navigator>
   );
}

const Tab = createBottomTabNavigator();

function TabNav (props) {
  const hide = props.routeName != "Profile"
   return (
      <Tab.Navigator initialRouteName="Home">
         <Tab.Screen name="Home" component={HomeScreen} />
         <Tab.Screen name="ProfileNav" component={ProfileNav} options={{
          headerShown: false,
          tabBarStyle: { display: hide ? "none" : "flex" }
        }} />
      </Tab.Navigator>
   );
}

function HomeScreen() {
  return <View></View>
}

function ProfileScreen(props) {
  return <View>
     <Button title="Nav to options" onPress={() => props.navigation.navigate("Options")}></Button>
  </View>
}

function OptionsScreen() {
  return <View></View>
}

const ref = createNavigationContainerRef();

export default function App() {
  const [routeName, setRouteName] = useState();

  return (
    <NavigationContainer
      ref={ref}
      onReady={() => {
        setRouteName(ref.getCurrentRoute().name)
      }}
      onStateChange={async () => {
        const previousRouteName = routeName;
        const currentRouteName = ref.getCurrentRoute().name;
        setRouteName(currentRouteName);
      }}
    >
       <TabNav routeName={routeName} />
     </NavigationContainer>
  );
}

这是一份工作零食。