React Native中的createBottomTabNavigator中未显示图标

Question

未在react native中的createBottomTabNavigator中显示的图标。我猜图标没有渲染。我尝试了以下代码。执行代码后得到以下结果。尝试在代码中使用https://oblador.github.io/react-native-vector-icons图标，但未正确设置任何图标。

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen:HomeScreen,
    navigationOptions: {
      tabBarIcon: ({ focused, tintColor })=> <Icon name="ios-mail" color={tintColor} size={14}/>
    },
  },
  tabBarOptions: { 
    showLabel: false,
    activeTintColor: '#0a0a0a',
    style: {
      backgroundColor: '#f7f7f7',
      height: 30,
      borderTopWidth: 1,
      borderTopColor: 'red'
    }          
  }
});

export default createAppContainer(TabNavigator);

Answer 1

再次运行此命令 yarn react-native run-android

这对我的项目很好

Answer 2

打开your_react_native_project-> android-> app-> build.gradle文件，并在文件末尾放置以下代码。

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

并将以下代码放入依赖项块中。

implementation project(':react-native-vector-icons')

这对我的项目很好。