react-native - react-navigation：当条件语句为真时，如何隐藏一个特定的 tabBar 图标和标签

Question

我正在使用反应导航。我的底部标签导航器有五个图标，我只想显示四个图标（屏幕 1、屏幕 2、屏幕 4 和屏幕 5）并隐藏另一个（屏幕 3）。

当且仅当条件语句为真时，如何隐藏 screen3 的图标和标签..？

这是我的代码：

const ButtomTabNavigator = createBottomTabNavigator(
  {
    screen1: {
      screen: screen1,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: 'screen1',
        header: null,
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="gear" color={tintColor} size={30} />
        ),
      })
    },
    screen2: {
      screen: screen2,
      navigationOptions: {
        header: null,
        tabBarLabel: 'screen2',
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="gear" color={tintColor} size={30} />
        ),
      }
    },

如果条件语句为真，我想隐藏此 screen3 图标和标签

    screen3: {
          screen: screen3,
          navigationOptions: {
            header: null,
            tabBarLabel: 'screen3',
            tabBarIcon: ({ tintColor }) => (
              <FontAwesome name="gear" color={tintColor} size={30} />
            ),
          }
        },
    screen4: {
          screen: screen4,
          navigationOptions: {
            header: null,
            tabBarLabel: 'screen4',
            tabBarIcon: ({ tintColor }) => (
              <FontAwesome name="gear" color={tintColor} size={30} />
            ),
          }
        },
        screen5: {
          screen: screen5,
          navigationOptions: {
            header: null,
            tabBarLabel: 'screen5',
            tabBarIcon: ({ tintColor }) => (
              <FontAwesome name="gear" color={tintColor} size={30} />
            ),
          }
        },
      },
      {
        tabBarOptions: {
          activeTintColor: '#16bb92',
        },
        shifting: true,
      }
    )

Answer 1

试试我的解决方案

const routes = (condition) => {
     let routes = {
         screen1: {
            screen: screen1,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: 'screen1',
                header: null,
                tabBarIcon: ({ tintColor }) => (
                    <FontAwesome name="gear" color={tintColor} size={30} />
                ),
            })
        },
        screen2: {
            screen: screen2,
            navigationOptions: {
                header: null,
                tabBarLabel: 'screen2',
                tabBarIcon: ({ tintColor }) => (
                    <FontAwesome name="gear" color={tintColor} size={30} />
                ),
            }
        },
        screen4: {
            screen: screen4,
            navigationOptions: {
                header: null,
                tabBarLabel: 'screen4',
                tabBarIcon: ({ tintColor }) => (
                    <FontAwesome name="gear" color={tintColor} size={30} />
                ),
            }
        },
        screen5: {
            screen: screen5,
            navigationOptions: {
                header: null,
                tabBarLabel: 'screen5',
                tabBarIcon: ({ tintColor }) => (
                    <FontAwesome name="gear" color={tintColor} size={30} />
                ),
            }
        }
     }

     if (condition) {
         routes["screen3"] = {
             screen: screen3,
             navigationOptions: {
             header: null,
             tabBarLabel: 'screen3',
             tabBarIcon: ({ tintColor }) => (
                 <FontAwesome name="gear" color={tintColor} size={30} />
             ),
         }
      }
   }

   return routes;
}

然后在您的导航中

const ButtomTabNavigator = createBottomTabNavigator(routes(/**Your condition**/, ....)

希望有所帮助:)