React-native Demo (+)-react-native-icons Plugin

react-native-icons Download

Run NPM install React-native-icons@latest--save at the root of the project and you will see the plugin in the Node_modules directory after the download is complete:

Configuration

Currently only supports iOS, so only the Xcode configuration: Import reactnativeicons.xcodeproj

1. Right-click on project libraries:

Add Node_modules/react-native-icons/ios/reactnativeicons.xcodeproj under the project root directory
2. Reference LIBREACTNATIVEICONS.A:
Standalone project, in the right panel, select link Binary with Libraries under Build phases, and click the + sign to add the library:

3. Add a TTF file:
This place needs to be noticed, GitHub is straight on the reference Node_modules/react-native-icons/ios/reactnativeicons/libraries/fontawesomekit folder, But the main one is 4 TTF files:

Standalone project, in the right panel select Build phases under Copy Bundle resources Select +, in the file selector that appears click Add Other ..., navigate to node_modules/react-native-icons/ In the Ios/reactnativeicons/libraries/fontawesomekit directory, select all TTF files and OTF:

Import

To use react-native-icons, you need to add the following statement in your code:

var {
   Icon,
 } = require (' react-native-icons ');

Select Icon

category	Number of icons	Reference name
Fontawesome 4.4	585	Fontawesome
Ionicons 2.0.0	733	Ion
Foundation icons	283	Foundation
Zocial	99	Zocial
Material Design Icons	744	Material

Example

We found an Apple icon on the FontAwesome4.4 website:

How to use it? Look at the following code:

' Use strict ';

 var React = require (' react-native ');
 var {
   Icon,
 } = require (' react-native-icons ');
 var {
   appregistry,
   StyleSheet,
   View,
 } = React;

 var testerhome = React.createclass ({
   render () {
     return (< Icon name = ' Fontawesome|apple '
       size = {
  
   150
       }
       style = {
         styles.beer
       }
       />


     );
   }
 );

 var styles = stylesheet.create ({
   container: {
     flex:1,
   },
   beer: {
     width:150,
     height: ,
   }
 });
 Appregistry.registercomponent (' Testerhome ', () = Testerhome);

  

The core code is Fontawesome|apple is that simple. So the reference is the name of the reference name of the library name | The icon, the effect is as follows: