在 StackNavigator 中隐藏 TopTabNavigator答案

【问题标题】：Hide TopTabNavigator inside StackNavigator在 StackNavigator 中隐藏 TopTabNavigator
【发布时间】：2020-09-11 20:47:57
【问题描述】：

我正在使用来自react-navigation 的createMaterialTopTabNavigator，并且每个选项卡都有 StackNavigator。打开堆栈屏幕后如何隐藏顶部选项卡？目前使用由 Redux 管理的 Expo。代码如下：

const favStack = createStackNavigator();
const loserStack = createStackNavigator();
const gainerStack = createStackNavigator();
const activeStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const MarketsTab = createMaterialTopTabNavigator();

export default class App extends Component {
  state = { loading: true };

  favStackScreen = () => (
    <favStack.Navigator>
      <favStack.Screen name="Favorites" component={Favorites} />
      <favStack.Screen name="Stock" component={Stock} />
    </favStack.Navigator>
  );
  loserStackScreen = () => (
    <loserStack.Navigator tabBarVisible="false">
      <loserStack.Screen name="Losers" component={Losers} />
      <loserStack.Screen name="Stock" component={Stock} />
    </loserStack.Navigator>
  );
  gainerStackcreen = () => (
    <gainerStack.Navigator headerMode="float">
      <gainerStack.Screen name="Gainers" component={Gainers} />
      <gainerStack.Screen name="Stock" component={Stock} />
    </gainerStack.Navigator>
  );
  activeStackScreen = () => (
    <activeStack.Navigator>
      <activeStack.Screen name="MostActive" component={MostActive} />
      <activeStack.Screen name="Stock" component={Stock} />
    </activeStack.Navigator>
  );

  MarketsTabScreen = () => (
    <MarketsTab.Navigator
      style={{
        paddingTop:
          Platform.OS === "ios"
            ? Constants.statusBarHeight
            : StatusBar.currentHeight,
      }}
    >
      <MarketsTab.Screen
        name="Losers"
        component={this.loserStackScreen}
      ></MarketsTab.Screen>
      <MarketsTab.Screen
        name="Gainers"
        component={this.gainerStackcreen}
      ></MarketsTab.Screen>
      <MarketsTab.Screen
        name="MostActive"
        component={this.activeStackScreen}
      ></MarketsTab.Screen>
    </MarketsTab.Navigator>
  );

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      ...Ionicons.font,
    });
    this.setState({ loading: false });
  }

  render() {
    if (this.state.loading) {
      return <AppLoading style={styles.container} />;
    }

    return (
      <Provider store={store.store}>
        <PersistGate loading={null} persistor={store.persistor}>
          <NavigationContainer>
            <Tab.Navigator>
              <Tab.Screen name="Favorites" component={this.favStackScreen} />
              <Tab.Screen name="Markets" component={this.MarketsTabScreen} />
            </Tab.Navigator>
          </NavigationContainer>
        </PersistGate>
      </Provider>
    );
  }
}

为了管理状态，我使用 Redux 并且我所有的组件都是类（所以不能使用 Hooks）。正在使用的组件：（Gainers、Loser、MostActive 作为顶部选项卡）和收藏夹作为底部选项卡。他们都应该可以访问 Stock 组件。

【问题讨论】：

标签： reactjs react-native redux react-navigation

【解决方案1】：

在您的情况下，您可以将 MarketsTab 导航器的 tabBar 属性设置为返回 null 的函数，如下所示：

MarketsTabScreen = () => (
  <MarketsTab.Navigator
    tabBar={() => null}
    style={{
      paddingTop:
        Platform.OS === 'ios'
          ? Constants.statusBarHeight
          : StatusBar.currentHeight,
    }}>
    <MarketsTab.Screen name="Losers" component={this.loserStackScreen} />
    <MarketsTab.Screen name="Gainers" component={this.gainerStackcreen} />
    <MarketsTab.Screen name="MostActive" component={this.activeStackScreen} />
  </MarketsTab.Navigator>
);

您仍然可以在标签导航器中滑动到屏幕，但不会显示顶部标签栏。

【讨论】：