如何在反应导航中有条件地隐藏 Tab? [英] How to hide Tab conditionally in react-navigation?

问题描述

如果用户登录，我想有条件地隐藏我的标签之一，

所以我有 5 个标签如果用户登录\注册我从 redux 商店得到一个布尔值，如果此用户登录，我想如何显示库选项卡"，如果未登录，我不想与其他人一起显示此选项卡库"，只需在应用程序中保留 4 个选项卡

代码

import {createAppContainer} from 'react-navigation';从'react-navigation-tabs'导入{createBottomTabNavigator}；让 {isLogin} = store.getState().user;const TabHome = createBottomTabNavigator({家: {屏幕:首页，导航选项:{tabBarLabel: '首页',},},浏览:{屏幕:浏览，导航选项:{tabBarLabel: '浏览',},},搜索: {屏幕:搜索，导航选项:{tabBarLabel: '搜索',标头显示:假，},},收音机: {屏幕:收音机，导航选项:{tabBarLabel: '收音机',},},图书馆: isLogin ?({屏幕:你的图书馆，导航选项:{tabBarLabel: '图书馆',},}) : (<查看/>//或 :null =>不工作并收到错误消息),//图书馆: {//屏幕:你的图书馆，//},},)导出默认 createAppContainer(TabHome);

<块引用>

错误:路由库"的组件必须是 React 组件.例如:

从'./MyScreen'导入MyScreen；...图书馆:MyScreen，}

您也可以使用导航器:

从'./MyNavigator'导入MyNavigator；...图书馆:MyNavigator，}

解决方案

In React Navigation v5:

import * as React from 'react';从'react-native'导入{文本，视图}；从'@react-navigation/native' 导入 { NavigationContainer };从@react-navigation/bottom-tabs"导入 { createBottomTabNavigator };从 'react-native-vector-icons/MaterialCommunityIcons' 导入 MaterialCommunityIcons；功能主屏幕(道具){返回 (<视图样式={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>首页！</Text></查看>);}功能设置屏幕(){返回 (<视图样式={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><文本>设置！</文本></查看>);}功能关于屏幕(){返回 (<视图样式={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>关于！</Text></查看>);}const Tab = createBottomTabNavigator();函数 MyTabs() {const [showTab, setShowTab] = React.useState(true);//5 秒后显示关于选项卡.//将此更改为使用 Redux 或然而//您想更改显示的选项卡setTimeout(() => {setShowTab(false);console.log('隐藏标签');}, 5000);返回 (<标签导航器><标签屏幕名称=家"组件={主屏幕}选项={{tabBarLabel: '首页',tabBarIcon: ({ color, size }) =>(<MaterialCommunityIcons name="home" color={color} size={size}/>),}}/>{显示标签?(<标签屏幕名称=关于"组件={关于屏幕}选项={{tabBarLabel: '关于',tabBarIcon: ({ color, size }) =>(<MaterialCommunityIcons name="book" color={color} size={size}/>),}}/>) : 空值}<标签屏幕名称=设置"组件={设置屏幕}选项={{tabBarLabel: '设置',tabBarIcon: ({ color, size }) =>(<MaterialCommunityIcons name="settings" color={color} size={size}/>),}}/></Tab.Navigator>);}导出默认函数 App() {返回 (<导航容器><MyTabs/></NavigationContainer>);}

Expo 中的示例 https://snack.expo.io/@jackvial/createbottomtabnavigator-%7C-react-navigation-v5

I want to hide one of my tabs conditionally if user login,

So I have 5 Tabs If user login\register I get a boolean from a redux store, if this user login i want to how a "Library tab" if not login, i don't want to show this tab "Library" with others and just keep 4 tabs in the App

Code

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

let {isLogin} = store.getState().user;


const TabHome = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      },
    },
    Browse: {
      screen: Browse,
      navigationOptions: {
        tabBarLabel: 'Browse',
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'Search',
        headerShown: false,
      },
    },
    Radio: {
      screen: Radio,
      navigationOptions: {
        tabBarLabel: 'Radio',
      },
    },
    Library: isLogin ? (
      {
        screen: YourLibrary,
        navigationOptions: {
          tabBarLabel: 'Library',
        },
      }
    ) : (
      <View /> // Or :null => Not work and got the under error msg
    ),
    // Library: {
    //   screen: YourLibrary,
    // },
  },
)

export default createAppContainer(TabHome);

Error: The component for route 'Library' must be a React component. For example:

import MyScreen from './MyScreen'; ... Library: MyScreen, }

You can also use a navigator:

import MyNavigator from './MyNavigator'; ... Library: MyNavigator, }

解决方案

In React Navigation v5:

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

function HomeScreen(props) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function AboutScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>About!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  const [showTab, setShowTab] = React.useState(true);

  // Show the about tab after 5 seconds.
  // Change this to use Redux or however
  // you would like to change which tabs are displayed
  setTimeout(() => {
    setShowTab(false);
    console.log('Hide tab');
  }, 5000);

  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      {showTab ? (
        <Tab.Screen
          name="About"
          component={AboutScreen}
          options={{
            tabBarLabel: 'About',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="book" color={color} size={size} />
            ),
          }}
        />
      ) : null}
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="settings" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Example in Expo https://snack.expo.io/@jackvial/createbottomtabnavigator-%7C-react-navigation-v5

这篇关于如何在反应导航中有条件地隐藏 Tab?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！