response-navigation: Как скрыть один конкретный значок c tabBar и метку, когда условное выражение истинно

Question

Я использую реагирующую навигацию. У меня есть пять значков для навигатора нижних вкладок, и я хочу показать только четыре значка (screen1, screen2, screen4 и screen 5) и скрыть остальные (экран 3).

Как скрыть значок и метку экрана3 тогда и только тогда, когда условное выражение истинно ..?

Это мой код:

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**/, ....)

Надеюсь, что это поможет :)