React native v3中反应导航底部选项卡栏的图标未显示

我最近将react navigation升级到v3并使我的应用程序运行，但底部选项卡栏图标似乎出现了渲染错误。即使标签渲染，图标也不会渲染。我正在使用react原生向量图标渲染图标

我尝试在选项卡栏选项中将showIcon属性设置为true，但这也不能解决我的问题。我还尝试将react导航降级回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,
    },
  },
};

const选项卡导航配置={
导航选项：（{navigation}）=>({
tabBarIcon:（{focused}）=>{
const{routeName}=navigation.state；
让我来；
交换机（路由名称）{
案例“批次”：
iconName=‘家’；
打破
案例“设置”：
iconName='设置'；
打破
违约：
iconName=‘家’；
打破
}
返回(
);
},
}),
animationEnabled:错误，
tabBarPosition:'底部'，
swipeabled:false，
backBehavior:“无”，
选项卡选项：{
showIcon：没错，
风格：{
背景颜色：colors.other.bg正常，
},
},
};

---

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

我对您的代码进行了一些小改动，您只需要使用defaultNavigationOptions而不是navigationOptions