react-native-icons的简单使用

react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条

icons是可以直接使用图片名, 就能加载图片的三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧!

1.首先打开终端进入到我们的工程文件夹下输入

npm install react-native-vector-icons --save (回车)

npm install rnpm -g

rnpm link (回车)  

2. 在Finder中用Xcode打开工程: …/Demo/ios/Demo.xcodeproj

(1).右键工程文件Add Files to “(你工程名)”

(2).选择node_modules/react-native-vector-icons/Fonts文件

(3).点击”完成”.

3. 在xcode的Info.plist文件中,加入: Fonts provided by application数组,并加入以下9项:

到此环境就算设置好了, 接下来就是使用ICONS了.

4. 在Finder中右键用Atom打开工程:

5.然后就开始编辑我们的程序了:

'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);

在terminal中的工程文件夹下,输入react-native run-ios(回车)等待程序运行起来就能看到效果啦.

主要代码下载地址: http://download.csdn.net/detail/margaret_mo/9512769

参考网站: https://github.com/oblador/react-native-vector-icons