Javascript 如何在react导航中有条件地隐藏选项卡？

如果用户登录，我想有条件地隐藏其中一个选项卡

所以我有5个标签，如果用户登录\注册我从redux商店得到一个布尔值， 如果这个用户登录我想如何“图书馆标签”如果不登录，我不想显示这个标签“图书馆”与其他人，只是保持4个标签在应用程序中

代码

从“react navigation”导入{createAppContainer}；
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
让{isLogin}=store.getState（）.user；
const TabHome=createBottomTabNavigator(
{
主页：{
屏幕：主页，
导航选项：{
tabBarLabel:“主页”，
},
},
浏览：{
屏幕：浏览，
导航选项：{
tabBarLabel:“浏览”，
},
},
搜索：{
屏幕：搜索，
导航选项：{
tabBarLabel:“搜索”，
校长：错，
},
},
电台：{
屏幕：收音机，
导航选项：{
tabBarLabel:“收音机”，
},
},
图书馆：伊斯洛金(
{
屏幕：你的图书馆，
导航选项：{
tabBarLabel:“库”，
},
}
) : (
//或者：null=>不工作，并收到错误消息
),
//图书馆：{
//屏幕：你的图书馆，
// },
},
)
导出默认createAppContainer（TabHome）；

错误：路由“库”的组件必须是React组件。 例如：

从“/MyScreen”导入MyScreen。。。库：MyScreen，}

您还可以使用导航器：

从“/MyNavigator”导入MyNavigator。。。库：MyNavigator，}

---

您知道可以重写Tabbar组件并为其添加自己的逻辑吗？ 也许这会给你一个想法：

---

也许这样，您可以设置条件样式以显示或隐藏选项卡栏的单个项目。

从

TabHome

中删除

Library

选项卡定义，并在导出组件之前添加它：

if(isLogin) {
  TabHome.Library = {
    screen: YourLibrary,
    navigationOptions: {
      tabBarLabel: 'Library',
    }
  }
}

export default createAppContainer(TabHome)

---

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

import*as React from'React'；
从“react native”导入{Text，View}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从“反应本机向量图标/材料通信图标”导入材料通信图标；
功能主屏幕（道具）{
返回(
回家！
);
}
函数设置屏幕（）{
返回(
设置！
);
}
函数AboutScreen（）{
返回(
关于
);
}
const Tab=createBottomTabNavigator（）；
函数MyTabs（）{
const[showTab，setShowTab]=React.useState（true）；
//5秒后显示“关于”选项卡。
//将此更改为使用Redux或
//您想更改显示的选项卡
设置超时（（）=>{
设置显示选项卡（假）；
log（'Hide tab'）；
}, 5000);
返回(
(
),
}}
/>
{showTab(
(
),
}}
/>
)：null}
(
),
}}
/>
);
}
导出默认函数App（）{
返回(
);
}

---

世博会中的例子

Hey@farhad，谢谢你的回复，但遗憾的是没有起作用，只是隐藏了标签，如果条件是真的/假的话。“D，是的，这在V5中是一个完美的方式，我就是这么做的：”D我只是忘了在这里提供答案，所以谢谢你，杰克，这工作很好，但请注意，当我在设备中检查expo示例时，它并没有显示IDK为什么！但是网络很好，非常欢迎你！我有一种感觉，你现在应该已经明白了：D。v5是一个很大的改进，目前正在使用v3更新我的管道式磁带连接解决方案。嗯，没有看到iOS的问题，我在mac上运行chrome。react navigation v4有什么办法吗？@GWANHUIKIM在react navigation v4中我的解决方案是创建两个选项卡栏，并使用react context或redux在呈现每个选项卡栏之间切换。每个选项卡栏可以有不同的选项卡。

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