Question

我最近将react-navigation升级到了v3，并运行了我的应用程序，但底部的标签栏图标似乎出现渲染错误。即使标签已渲染，图标也根本不会渲染。我正在使用react-native-vector-icons渲染图标。

我尝试在选项卡栏选项中将showIcon属性设置为true，但这对我来说也无法解决问题。我还尝试将react-navigation降级到v2.x，但这无济于事

const TabNavigatorConfig = {
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused }) => {
      const { routeName } = navigation.state;
      let iconName;
      switch (routeName) {
        case 'Batches':
          iconName = 'home';
          break;
        case 'Settings':
          iconName = 'settings';
          break;
        default:
          iconName = 'home';
          break;
      }
      return (
        <Icon
          size={22}
          name={iconName}
          color={focused ? colors.secondary.normal : colors.other.bbIconNormal}
        />
      );
    },
  }),
  animationEnabled: false,
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  backBehavior: 'none',
  tabBarOptions: {
    showIcon: true,
    style: {
      backgroundColor: colors.other.bgNormal,
    },
  },
};

预期结果是具有一个带有特定色度的活动图标和一个具有不同色度的非活动图标。但是，实际结果是根本不渲染图标。我认为矢量图标不是问题，因为它们在应用程序中的其他任何地方都能完美呈现。代码有问题吗？或者可能是React Navigation v3的另一种方法。

Answer 1

我运行您的代码时几乎没有任何变化，只是您需要使用defaultNavigationOptions而不是navigationOptions

v3中未显示React导航底部标签栏的图标

1 个答案: