来自 React-native-elements/fontAwesome 的图标未显示答案

【问题标题】：Icons from React-native-elements/fontAwesome are not showing来自 React-native-elements/fontAwesome 的图标未显示
【发布时间】：2018-12-23 22:16:41
【问题描述】：

我正在为抽屉项目和 headerLeft 设置图标。但图标没有出现在我的 android 应用程序中。我正在使用 react-native-elements 库在我的代码中使用图标。图标类型是字体真棒。我已经特别提到了图标的类型。

我已尝试所有命令，如 react-native link 并成功链接所有库，但没有任何效果。

MainComponent.js

import React, { Component } from 'react';
import Menu from './MenuComponent';
import { View,Platform } from 'react-native';
import Dishdetail  from './DishdetailComponent';
import Home from './HomeComponent';
import { createStackNavigator,createAppContainer} from 'react-navigation'; 
import {createDrawerNavigator} from 'react-navigation'; 
import { Icon } from 'react-native-elements'
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import Contact from './ContactusComponent';
import About from './AboutusComponent';


 const MenuNavigator = createStackNavigator({
 Menu: { 
 screen: Menu,
 navigationOptions: ({ navigation }) => ({
   headerLeft: <Icon 
          name='menu' size={24} 
               color="white" 
               type="font-awesome"
               onPress={() => navigation.toggleDrawer()}
              />
  })
 },
 Dishdetail: { 
screen: Dishdetail 
 }
   },
 { 
   initialRouteName: 'Menu',
   navigationOptions: {
  headerStyle: {
      backgroundColor: "#512DA8"
   },
  headerTintColor: '#000',
  headerTitleStyle: {
      color: "#fff"            
  }
 }
    }
);

 const HomeNavigator = createStackNavigator({
   Home: 
   { screen: Home }
    }, {
  navigationOptions: ({ navigation }) => ({
  headerStyle: {
    backgroundColor: "#512DA8"
   },
   headerTitleStyle: {
    color: "#fff"            
   },
   headerTintColor: "#fff" ,
   headerLeft: <Icon name='menu' size={24} 
               color="white" 
               type="font-awesome"
               onPress={() => navigation.toggleDrawer()}
              /> 
    })
   });

  const ContactNavigator = createStackNavigator({
   Contact: {
screen: Contact
 }
  }, {
   navigationOptions: ({ navigation }) => ({
   headerStyle: {
  backgroundColor: '#512DA8'
  },
   headerTitleStyle: {
  color: '#fff'
  },
   headerTintColor: '#fff',
     headerLeft: <Icon name='menu' size={24} 
               color="white" 
               type="font-awesome"
               onPress={() => navigation.toggleDrawer()}
              />
 })
    } );

const AboutNavigator = createStackNavigator({
About: {
screen: About
 }
  }, {
  navigationOptions: ({ navigation }) => ({
  headerStyle: {
  backgroundColor: '#512DA8'
},
headerTitleStyle: {
  color: '#fff'
},
headerTintColor: '#fff',
headerLeft: <Icon name='menu' size={24} 
               color="white" 
               type="font-awesome"
               onPress={() => navigation.toggleDrawer()}
              />
   })
   });

 const MainNavigator = createDrawerNavigator({
  Home: 
{ 
  screen: HomeNavigator,
  defaultNavigationOptions:  {
    title: 'Home',
    drawerLabel: 'Home',
    drawerIcon: ({tintColor} )=> (
        <Icon 
        name='home'
        type="font-awesome"
        size= {24}
        color={tintColor}   />
    )
  }
},
  Menu: 
  { screen: MenuNavigator,
   defaultNavigationOptions: {
    title: 'Menu',
    drawerLabel: 'Menu',
    drawerIcon: ({'#000'} )=> (
        <Icon 
        name='list'
        type="font-awesome"
        size= {24}
        color={'#000'}   />
    )
  }, 
 },
     Contact:
   {
  screen: ContactNavigator,
  defaultNavigationOptions: {
    title: 'Contact us',
    drawerLabel: 'Contact Us',
    drawerIcon: ({tintColor} )=> (
        <Icon 
        name='address-card'
        type="font-awesome"
        size= {22}
        color={tintColor}   />
    )
  }
    },
   About:
     {
  screen: AboutNavigator,
  defaultNavigationOptions: {
    title: 'About Us',
    drawerLabel: 'About',
    drawerIcon: ({tintColor} )=> (
        <Icon 
        name='info-circle'
        type="font-awesome"
        size= {24}
        color={tintColor}   />
    )
  }
}
   }, {
     drawerBackgroundColor: '#D1C4E9',
     drawerPosition: "left"
   });

class Main extends Component {


 render() {

   return (

    <View style={{flex:1 }}>
        <MainNavigator />
    </View>

);
  }
 }


 const App=createAppContainer(MainNavigator);


export default App;

package.json

   "dependencies": {
    "feather-icons-react": "^0.3.0",
    "react": "16.6.3",
     "react-native": "0.57.8",
     "react-native-elements": "^1.0.0-beta7",
     "react-native-gesture-handler": "^1.0.12",
     "react-native-vector-icons": "^4.6.0",
      "react-navigation": "^3.0.9"
      },

我希望出现图标，但根本不出现。

【问题讨论】：

标签： react-native icons react-android react-native-vector-icons react-native-elements

【解决方案1】：

这是一种方法，自 2020 年 1 月 20 日起生效。

假设你已经安装了react-native-elements，如果没有yarn add react-native-elements

import { Icon } from 'react-native-elements';
.
.
.

// Drawer Navigator
const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      drawerIcon: (
        <Icon
          reverseColor
          name='home'
          type='font-awesome'
          size={26}
        />
      ),
    },
  }
});

【讨论】：

【解决方案2】：

这是因为 font-awesome 中没有名为“菜单”的图标。

您可以查看https://oblador.github.io/react-native-vector-icons/中的图标

【讨论】：