react-native-vector-icons的简单使用

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ 'use strict'; import React, { AppRegistry, Component, View, StyleSheet, AlertIOS, Text, TabBarIOS, NavigatorIOS, } from 'react-native'; var Icon = require('react-native-vector-icons/FontAwesome'); import FindComponent from './FindComponent'; import SearchComponent from './SearchComponent'; class Demo extends Component { state = { selectedTab: 'find', }; loginWithFacebook = () => { //点击"Login with Facebook"按钮后触发的方法 AlertIOS.alert("facebook"); } render() { return ( <View style={styles.container}> <Icon name="rocket" //图片名连接,可以到这个网址搜索:http://ionicons.com/, 使用时:去掉前面的 "icon-" !!!! size={30} //图片大小 color="red" //图片颜色 /> <Icon.Button //在图片后加文字 name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook} //点击该按钮后触发的方法 > Login with Facebook </Icon.Button> <Icon.Button //在图片后加, 自定义样式的文字 name="facebook" backgroundColor="#3b5998"> <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text> </Icon.Button> <TabBarIOS //和标签视图一起使用 tintColor="#4977f0" barTintColor="#E6E6E6"> <Icon.TabBarItem //用 Icon.TabBarItem 代替 TabBarIOS.Item title="发现" iconName="home" selectedIconName="home" selected = {this.state.selectedTab === 'find'} onPress={() => { this.setState({ selectedTab: 'find', }); }}> <NavigatorIOS //导航栏 style={styles.container} tintColor='#FFFFFF' barTintColor='#4977f0' initialRoute={{ title: "发现", titleTextColor: 'white', component: FindComponent }}/> </Icon.TabBarItem> <Icon.TabBarItem //用 Icon.TabBarItem 代替 TabBarIOS.Item title="搜索" iconName="search" selectedIconName="search" selected = {this.state.selectedTab === 'search'} onPress={() => { this.setState({ selectedTab: 'search', }); }}> <NavigatorIOS style={styles.container} tintColor='#FFFFFF' barTintColor='#4977f0' initialRoute={{ title: "搜索", titleTextColor: 'white', component: SearchComponent }}/> </Icon.TabBarItem> </TabBarIOS> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, }); AppRegistry.registerComponent('Demo', () => Demo);