logo标签列表

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

react-nativeiconsreact-androidreact-native-vector-iconsreact-native-elements
5

我正在为抽屉项和标题左侧设置图标。但是在我的Android应用程序中，图标没有显示出来。我在代码中使用了react-native-elements库来使用图标。图标类型是font-awesome。我已经明确指定了图标类型。

我尝试了所有命令，如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"
      },

我希望显示图标，但是没有出现。

3个回答
3
这是一种方法，截至2020年1月20日仍然有效。
假设您已经安装了`react-native-elements`，如果没有，请执行`yarn add react-native-elements`。
以下是一个示例图片：enter image description here 
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}
        />
      ),
    },
  }
});
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接