Иконки из React-native-elements / fontAwesome не отображаются - PullRequest
Новая
       11

Иконки из React-native-elements / fontAwesome не отображаются

0 голосов
/ 24 декабря 2018

Я устанавливаю значки для элементов ящика и для headerLeft. Но значки не появляются в моем приложении для Android. Я использую библиотеку реагировать-нативные элементы для использования значков в моем коде.Тип иконки - шрифт.я специально упомянул тип значка.

Я попробовал все команды, такие как Reaction-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"
      },

Я хотел бы видеть значки, но не появляется вообще.

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

Это потому, что в font-awesome нет значка с именем "menu".

Вы можете проверить значки в https://oblador.github.io/react-native-vector-icons/

0 голосов
/ 24 декабря 2018

Проверьте здесь: https://fontawesome.com/start

Добавьте https://use.fontawesome.com/releases/v5.6.3/css/all.css в ваш index.html.

Проверьте здесь также https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

...