设置tabBaiIcon不管用，使用react-native-vector-icons

Question

使用react-native-vector-icons没有图标展示demo中

Answer 1

CrazyCodeBoy 2018-11-28 09:52:12

检查下所使用的icon在https://oblador.github.io/react-native-vector-icons/ 中是否还存在，另外tabBarIcon的设置可参考一下代码：

export const MaterialTopTabNavigator = createMaterialTopTabNavigator({//在这里配置页面的路由
       Page1: {
           screen: Page1,
           navigationOptions: {
               tabBarLabel: 'Page10',
               tabBarIcon: ({tintColor, focused}) => (
                   <Ionicons
                       name={'ios-home'}
                       size={26}
                       style={{color: tintColor}}
                   />
               ),
           }
       },

• 提问者 barray #1

  我使用的是最新版本的react-native-vector-icons6.1.0与最新版的react-navigation3.0.0 然后按照上面的代码实现,无法实现图标的显示(╥╯^╰╥)

• 提问者 barray #2

  使用react-navigation3.0.0文档中的代码无法实现
  export default createBottomTabNavigator(
    {
      Home: HomeScreen,
      Settings: SettingsScreen,
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
          const { routeName } = navigation.state;
          let iconName;
          if (routeName === 'Home') {
            iconName = `ios-information-circle${focused ? '' : '-outline'}`;
          } else if (routeName === 'Settings') {
            iconName = `ios-options${focused ? '' : '-outline'}`;
          }
          return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
        },
      }),
      tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      },
    }
  );

• 提问者 barray #3

  老师,我知道原因了,使用defaultNavigationOptions可以,但是使用tNavigationOptions就不显示了ε(┬┬﹏┬┬)3