javascript - React Navigation V5 隐藏底部选项卡

Question

我希望能够使用 React Native Navigation v5 隐藏屏幕上的选项卡。

我一直在阅读文档，但似乎他们没有为 v5 更新此文档，它指的是 < v4 的做事方式。

这是我的代码:

import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const SettingsStack = createStackNavigator();
const ProfileStack  = createStackNavigator();

function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
            <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        </SettingsStack.Navigator>
    )
}

function ProfileStackScreen() {
    return (
        <ProfileStack.Navigator>
            <ProfileStack.Screen name="Home" component={Home} />
        </ProfileStack.Navigator>
    )
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={ProfileStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

我尝试过的事情:

访问函数的选项并以这种方式隐藏。

将 tabBarVisible 作为 Prop 传递给屏幕。

我要问的是，在 React Navigation v5 中隐藏屏幕上的选项卡的正确方法是什么。

Answer 1

tabbarvisible-option-is-no-longer-present在 react 导航 v5 向上。您可以通过指定来实现相同的行为tabBarStyle: { display: 'none' }在要隐藏底部选项卡的屏幕选项中

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={ProfileStackScreen} />
        <Tab.Screen options={{tabBarStyle:{display:'none'}}} name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}