Question

我正在使用反应导航。我的bottomtab导航器有三个图标，我只想显示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

请尝试这个

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

Answer 2

您可以从createBottomTabNavigator中删除screen3并将此屏幕添加到RootNavigator。如果要导航到screen3，则可以进行navigation.navigate（“ screen3”）。详细https://snack.expo.io/HytREN3ur。

react-navigation：如何隐藏一个特定的tabBar图标和标签

2 个答案: