反应原生图标

Question

Somebody try to use react-native-icons? I follow this steps:

• npm install react-native-icons@latest --save
• In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name]
• Go to node_modules ➜ react-native-icons➜ ios and add ReactNativeIcons.xcodeproj
• Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your project's Build Phases ➜ Link Binary With Libraries phase
• Add the font files you want to use into the Copy Bundle Resources build phase of your project (click the '+' and click 'Add Other...' then choose the font files from node_modules/react-native-icons/ios/Libraries/FontAwesomeKit). Run your project (Cmd+R)

My Code

var React = require('react-native');
var Icon = require('FAKIconImage');
var { AppRegistry, StyleSheet, Text, View} = React;

class BringgersApp extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return(
      <View style={styles.container}>        
        <Text style={styles.welcome}>
          Welcome to Bringgers!          
        </Text>
        <Icon
          name='ion|beer'
          size={150}
          color='#887700'
          style={styles.beer} />       
      </View>
    )
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

React.AppRegistry.registerComponent('BringgersApp', function() { return BringgersApp });

After I build, he says the file doesn't exist...

Font file doesn't exist

I clean the DerivedData and try to build many times, but doesn't work.

Answer 1

Steps to install and usage Ionicons , FontAwesome and Entypo font Icons in react-native .

First you need to install using following command.

react-native install react-native-vector-icons

Then Required to Link:

react-native link react-native-vector-icons

Import font package files to your page:

import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Entypo from 'react-native-vector-icons/Entypo';

Usage Example:

<View>
    <Text>Ionicons Icons</Text>
    <Icon name='md-bicycle' />

    <Text>FontAwesome Icons</Text>
    <FontAwesome name='trophy' />

    <Text>Entypo Icons</Text>
    <Entypo name='aircraft' />
</View>

If you want to see list of available icons, you can look in this directory:

Ionicons:

\node_modules\react-native-vector-icons\glyphmaps\Ionicons.json

FontAwesome:

\node_modules\react-native-vector-icons\glyphmaps\FontAwesome.json

Entypo:

\node_modules\react-native-vector-icons\glyphmaps\Entypo.json 

Giving you my apps screenshot.

Answer 2

First things first,

• the maintainer of react-native-icons himself points to the newer & maintained react-native-vector-icons
• Apparently as of now the rnpm project has been merged into react-native.

In other words, your life can be as easy as typing

react-native install react-native-vector-icons
react-native link react-native-vector-icons

And you may be good to go*)

*) at least it worked on my machine

Answer 3

您是否将文件node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/ionicons.ttf到您的项目中？

Answer 4

1. Do you have "Build settings" -> "Header Search Paths" -> "$(SRCROOT)/node_modules/react-native/React" recursive?
2. Did you include icon fonts to "Build phases" -> "Copy Bundle Resources" in your Main project?

Answer 5

So in my project, I access the Icons through this code: let { Icon, } = require('react-native-icons');

Although I never had issues using FontAwesome icons, I had issues using Material Icons. You can also check out react-native-vector-icons .

Answer 6

Use React Native Package Manager : https://github.com/rnpm/rnpm

$ npm install rnpm -g Running

Installing dependency:

If you want to install a dependency and link it in one run:

$ rnpm install react-native-icons Linking dependency:

If you already have some installed (but not linked) modules, run:

$ rnpm link

Answer 7

try

rnpm link // If you installed module

Also

npm install module-name

and after execute

rnpm link

restart services..

This code relink automatic your modules.

Work to me. Thanks.

Answer 8

you can also try with native-base library. it provide tag it is easy and simple to use any icon which can be use with mobile devices.

follow this link for more information on native base icon. http://nativebase.io/docs/v2.0.0/components#icon

follow this link for more information on list of icon. https://ionicframework.com/docs/v2/ionicons/

ex.

<Icon name='ios-list'  style={style.icon} />

Answer 9

Step 1: Install react-native-elements

yarn add react-native-elements
# or with npm
npm i react-native-elements --save

Step 2: Install react-native-vector-icons

If you have already installed react-native-vector-icons as a dependency for your project you can skip this step. Otherwise run the following command:

# yarn
yarn add react-native-vector-icons
# or with npm
npm i --save react-native-vector-icons

# link
react-native link react-native-vector-icons

and after this just simply use them in your project like

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

class IonBeer extends React.Component {
  render() {
    return (
         <Icon
          name='md-beer'
          type='ionicon'
          color='#887700'
          size=150
        />
    );
  }
}

and then simply use it like.

<IonBeer/>

any where you want

Answer 10

For using icons in react native, there are many libraries available, react-native-vector-icons is one of them, it is very easy to use.

just follow 2 steps, first you have to install library, then you have to link it also, to use it in your project.

Run this command for installing library

• npm install react-native-vector-icons --save

Run this command for linking library

• react-native link react-native-vector-icons

How to use this library

You can use any directory showed in the image, each directory has a lots of icons in it, now you have to choose which directory has a best icon for you...

For finding best directory for you, I will recommend you, simply visit this link:

Find best icon for your app

On this website simply search the name of icon you are lookig for, You will get matching icons in all directories, you can simply remember the name of your selected icon, and use it in your app...

suppose I search arrow on this link, and I selected arrowsalt from AntDesign directory and want to use it in my App.

import Icon from 'react-native-vector-icons/AntDesign';

if you want to use FontAwesome, then simply replace AntDesign with FontAwesome , or the name of directory you want to use. eg import Icon from 'react-native-vector-icons/DirectoryName';

And use icon like this.

<Icon name="arrowsalt" size={30} color="blue" />

For further details Visit this link

Reference:

• https://openbase.com/js/react-native-vector-icons/documentation
• https://aboutreact.com/react-native-vector-icons/
• https://oblador.github.io/react-native-vector-icons/

Answer 11

For Icon you can use react-native vector icon . It comprises of various icon that we can use in your project for a native look .

for more you can have a look https://github.com/oblador/react-native-vector-icons .

For more native components you can have a look at nativebase.io .It's an awesome library for UI in react native .