реакции-навигация: как скрыть один конкретный значок и ярлык вкладки

Question

Я использую реагирующую навигацию. У меня есть три иконки для нижнего навигатора, и я хочу показать только two icons(screen1 & screen2) и hide the other(screen3).

Как мне hide значок и метку screen3?

Этомой код:

const ButtomTabNavigator = createBottomTabNavigator(
  {
    screen1: {
      screen: screen1,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: 'screen1',
        header: null,
        tabBarIcon: ({ tintColor }) => (
          <Image style={{ width: 18, height: 18, tintColor: tintColor }}
            source={require('./Components/Assets/iconMyGrey.png')}
          />
        ),
      })
    },
    screen2: {
      screen: screen2,
      navigationOptions: {
        header: null,
        tabBarLabel: 'screen2',
        tabBarIcon: ({ tintColor }) => (
          <Image style={{ width: 18, height: 18, tintColor: tintColor }}
            source={require('./Components/Assets/iconListGrey.png')}
          />
        ),
      }
    },
    screen3: {
      screen: screen3,
      navigationOptions: {
        header: null,
        tabBarLabel: 'screen3',
        tabBarIcon: ({ tintColor }) => (
          <Image style={{ width: 21, height: 17, tintColor: tintColor }}
            source={require('./Components/Assets/iconReservationMint.png')}
          />
        ),
      }
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#16bb92',
    },
    shifting: true,
  }
) 

Любые советы или комментарии будут очень благодарны! Заранее спасибо:)

Answer 1

Вы можете удалить screen3 из createBottomTabNavigator и добавить этот экран в RootNavigator. Если вы хотите перейти к screen3, вы можете использовать навигацию. Navigate ("screen3"). Подробно https://snack.expo.io/HytREN3ur.

Answer 2

Пожалуйста, попробуйте это

const HomeTab = createBottomTabNavigator(
      {
        Scree1: Screen1,
        Screen2: Screen2,
        Screen3: Screen3,
      },
      {
        defaultNavigationOptions: ({ navigation }) => ({
          tabBarIcon: ({ focused, horizontal, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;
            if (routeName === "Screen1") {
              iconName = Images.icons.efficiencyTab;
            } else if (routeName === "Screen2") {
              iconName = Images.icons.messagesTab;
            } else if (routeName === "Screen3") {
              return (<View/>)
            }

            return (
              <Image
                style={{ width: 30, height: 30, tintColor: tintColor }}
                source={iconName}
              />
            );
          },

          tabBarLabel: ({ focused, horizontal, tintColor }) => {
            const { routeName } = navigation.state;
            let title;
            if (routeName === "Screen1") {
              title = "Screen1";
            } else if (routeName === "Screen2") {
              title = "Screen2";
            } else if (routeName === "Screen3") {
              title = "";
            } 

            return (
              <Text
                style={{
                  // alignSelf: "center",
                  textAlign: "center",
                  fontSize: 12,
                  color: tintColor,
                  marginBottom: 3
                }}
              >
                {title}
              </Text>
            );
          }
        }),
        tabBarOptions: {
          activeTintColor: Constants.APP_THEME_COLOR2,
          inactiveTintColor: Constants.APP_GRAY_COLOR,
          style: {
            height: 50
          },
          labelStyle: {
            marginBottom: 3
          }
        }
      }
    );