React Native底部菜单栏无图标，如何正确配置tabBarIcon属性？

问题根因 #

你的底部导航结构中，createBottomTabNavigator 绑定的路由对象是createStackNavigator实例，而非Stack内部的页面组件。你当前将tabBarIcon配置写在Stack内部的LeagueTableScreen组件上，底部导航无法读取到该层级的配置，所以图标不生效。

解决方案 #

直接在createBottomTabNavigator的路由配置中，给每个绑定Stack的路由项新增navigationOptions配置即可，修改你的App.js中mainFlow部分的代码：

mainFlow: createBottomTabNavigator({
    Rosa: {
      screen: createStackNavigator({
          Team: TeamScreen,
          PlayerDetail: PlayerDetailScreen,
      }),
      navigationOptions: {
        tabBarLabel: 'Rosa',
        // 替换成你对应要显示的图标
        tabBarIcon: () => <SimpleLineIcons name="user" size={18} />
      }
    },
    Classifica: {
      screen: createStackNavigator({
          LeagueTable: LeagueTableScreen,
      }),
      navigationOptions: {
        tabBarLabel: 'Classifica',
        tabBarIcon: () => <SimpleLineIcons name="people" size={18} />
      }
    },
    Calendario: {
      screen: createStackNavigator({
          LeagueCalendar: LeagueCalendarScreen,
      }),
      navigationOptions: {
        tabBarLabel: 'Calendario',
        // 替换成你对应要显示的图标
        tabBarIcon: () => <SimpleLineIcons name="calendar" size={18} />
      }
    },
}),

补充优化 #

如果需要根据Tab的聚焦状态切换图标颜色，可以修改tabBarIcon的写法：

tabBarIcon: ({ focused }) => (
  <SimpleLineIcons 
    name="people" 
    size={18} 
    color={focused ? '#你的主题色' : '#未选中灰色'} 
  />
)

配置完成后，原来LeagueTableScreen组件里的navigationOptions中的tabBarIcon配置可以删除，保留title配置不影响Stack内部顶部导航栏的显示。

内容的提问来源于stack exchange，提问作者Beppe_93