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

Question

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

我已经尝试了所有命令，例如本机链接，并成功链接了所有库，但无济于事。

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"
      },

我希望显示图标，但根本不显示。

Answer 1

在这里检查：https://fontawesome.com/start

在您的index.html中添加https://use.fontawesome.com/releases/v5.6.3/css/all.css。

也请点击此处https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

Answer 2

这是因为字体真棒中没有名为“菜单”的图标。

您可以检查https://oblador.github.io/react-native-vector-icons/

中的图标

Answer 3

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

假设您已经安装了 return ( <> <form onSubmit={e => { setUrl(api); e.preventDefault(); }} ></form> {isError && <div>Something went wrong...</div>} {isLoading ? <div>Loading...</div> : <ul></ul>} {data && <Table columns={columns} data={data} plans={plans} specials={specials} />} </> ); } export default search; ，如果没有react-native-elements

yarn add react-native-elements