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

Question

我正在使用反应导航。我的bottomtabs导航器有五个图标，我只想显示四个图标（screen1，screen2，screen4和screen 5），而隐藏另一个图标（screen 3）。

[并且仅当条件语句为true时，才能隐藏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**/, ....)

希望有帮助：）