響應本機的 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')

這適用於我的項目。