React-native-vector-icons simple use, picture, button, tag view, navigation bar

Icons is can directly use the image name, you can load the three sides of the picture, the use is very convenient, you do not need to plug various pictures in the project folder, save a lot of space, the following to see how to use it!

1. First open the terminal into our project folder (please refer to: http://blog.csdn.net/margaret_mo/article/details/51304062)

Input: npm Install react-native-vector-icons--save (carriage return)

Input: NPM Install Rnpm-g

Input: RNPM link (carriage return)

2. Open the project with Xcode in the Finder: .../demo/ios/demo.xcodeproj

(1). Right-click the project file Add files to "(You project name)"

(2). Select the Node_modules/react-native-vector-icons/fonts file

(3). Click "Finish".

3. In Xcode's Info.plist file, add: Fonts provided by application array and add the following 9 items:

When this environment is set up, the next step is to use icons.

4. right-click in the Finder to open the project with Atom:

5. Then we begin to edit our program:

 ' Use strict '; import React, {//imports the native components required below Appregistry, Component, View, StyleSheet, Alertios, Text, Tabbarios, Navigatorios,} from ' react-native '; var Icon = require (' React-native-vector-icons/fontawesome '); <span style= " White-space:pre "></span>import findcomponent from './findcomponent '; <span style=" White-space:pre "> &LT;/SPAN&GT;//Discovery Page Component import searchcomponent from './searchcomponent '; <span style= "White-space:pre" ></span  >//Search Page Component Class Demo extends Component {state = {selectedtab: ' Find ',};  Loginwithfacebook = () + {//click on the "Login with Facebook" button to trigger the method Alertios.alert ("Facebook"); } render () {return (<view style={styles.container}> <icon name= "Rocket"///Picture name to connect to this          URL Search: http://ionicons.com/, when used: Remove the front "icon-"!!!! SIZE={30}//Picture size color= "red"//Picture color/> <icon.button//Add text after picture name= "Facebook "Backgroundcolor=" #3b5998 "onpress={This.loginwithfacebook}//Click the button to trigger the method > Login with Facebook </Icon.Button> <i Con. Button//Add after picture, custom style text name= "Facebook" backgroundcolor= "#3b5998" > <text STYLE={{FONTFA Mily: ' Arial ', fontsize:15}}>login with facebook</text> </Icon.Button> <tabbarios//and superscript  Use tintcolor= "#4977f0" bartintcolor= "#E6E6E6" > <icon.tabbaritem//Icon.tabbaritem instead Tabbarios.item title= "found" iconname= "Home" Selectediconname= "Home" selected = {thi S.state.selectedtab = = = ' Find '} onpress={() = {This.setstate ({selectedtab: ' Find           ',             });             }}> <navigatorios//navigation bar Style={styles.container} tintcolor= ' #FFFFFF ' Bartintcolor= ' #4977f0 ' initialroute={{title: "Found", Titletextcolor: ' WHIte ', component:findcomponent}}/> </Icon.TabBarItem> <icon.tabbari TEM//Use Icon.tabbaritem instead of Tabbarios.item title= "search" iconname= "searching" selectediconname= "se                Arch "selected = {This.state.selectedTab = = = ' Search '} onpress={() = {This.setstate ({           Selectedtab: ' Search ',}); }}> <navigatorios Style={styles.container} tintcolor= ' #FFFFFF ' bartint               Color= ' #4977f0 ' initialroute={{title: "Search", Titletextcolor: ' White ', Component:searchcomponent}}/> </Icon.TabBarItem> </TabBarIOS> </view&    Gt  ); }}const styles = stylesheet.create ({container: {flex:1, justifycontent: ' Center ',},}); Appregistry.registercomponent (' demo ', () = demo);

Under the project folder in terminal, enter React-native Run-ios (carriage return) to wait for the program to run and see the effect.

Main code: http://download.csdn.net/detail/margaret_mo/9512769

Reference website: https://github.com/oblador/react-native-vector-icons

React-native-vector-icons simple use, picture, button, tag view, navigation bar