React Navigation V5隐藏底部选项卡 [英] React Navigation V5 Hide Bottom Tabs

问题描述

我希望能够使用React Native Navigation v5隐藏屏幕上的标签.

I would like to be able to hide the tabs on a screen using React Native Navigation v5.

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

I've been reading the documentation but it doesn't seem like they've updated this for v5 and it refers to the < v4 way of doing things.

这是我的代码:

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

我尝试过的事情:

1. 访问该功能的选项并以这种方式隐藏.
2. 将tabBar传递给屏幕作为道具.

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

What I am asking for is, what is the correct way of hiding tabs on screens in React Navigation v5.

推荐答案

让我们假设您要在输入设置"时隐藏选项卡.只需在构造函数中添加导航即可:

Let's suppose that you want to hide tabs when you are entering Settings. Just add navigation in your constructor:

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

此代码应该有效.

这篇关于React Navigation V5隐藏底部选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！