前面一共写了几篇基础的文章：
算是自己对RN的入坑礼吧，从这篇开始，以一个完整的项目为例，继续分享我的RN学习经历，有兴趣的可以关注下，没兴趣看看就好~~~不闲话了。
BB0EF242-D132-49CC-A321-008050D101CF.png
这里介绍如果实现一个TabNavigator页面，这里将以全新的项目为基础，所以新建一个工程，目录如下：
EF1AEED8-569C-4918-AF14-387F66B1CBD8.png
components目录放组件，image目录放项目图片资源，utils目录放一些工具类，view目录放页面。
首先这里使用到了第三方组件：react-native-tab-navigator 和 react-native-vector-icons，这里需要跳转到工程的目录下添加下依赖包：
npm install react-native-tab-navigator --save
npm install react-native-vector-icons --save
添加依赖完成后，我们还需要把依赖包添加到工程中：
react-native link
这样工程就能访问到第三方组件了。
参看上面的工程目录图和效果图，我们需要创建一个TabBar的组件和一个主界面的View，看TabBar.js内容，首先导入相关的组件和页面：
import React, {Component} from 'react';
import {Text, Image, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import TabNavigator from 'react-native-tab-navigator';
import Homeview from '../view/MineView';
这里Homeview是随便一个页面，用里显示tabBarItem里面的页面，这里就不简单给出内容了，还需要把两个第三方组件导进来。
下面直接上TabBar.js的内容：
export default class TabBar extends Component {
static defaultProps = {
selectedColor: 'rgb(22,131,251)',
normalColor: '#a9a9a9'
};
constructor(props) {
super(props);
this.state = {
selectedTab: 'home',
tabName: ['首页', '发现', '我']
}
}
render() {
const {selectedColor} = this.props;
const {tabName} = this.state;
return (
<TabNavigator
hidesTabTouch={true}
tabBarStyle={styles.tabbar}
sceneStyle={{ paddingBottom: styles.tabbar.height }}>
<TabNavigator.Item
tabStyle={styles.tabStyle}
title={tabName[0]}
selected={this.state.selectedTab === 'home'}
selectedTitleStyle={{color: selectedColor}}
renderIcon={() => <Image style={styles.tab} source={this.state.homeNormal} />}
renderSelectedIcon={() => <Image style={styles.tab} source={this.state.homeSelected} />}
onPress={() => this.setState({ selectedTab: 'home' })}>
{<Homeview />}
</TabNavigator.Item>
<TabNavigator.Item
tabStyle={styles.tabStyle}
title={tabName[1]}
selected={this.state.selectedTab === 'compass'}
selectedTitleStyle={{color: selectedColor}}
renderIcon={() => <Image style={styles.tab} source={this.state.compassNormal} />}
renderSelectedIcon={() => <Image style={styles.tab} source={this.state.compassSelected} />}
onPress={() => this.setState({ selectedTab: 'compass' })}>
{<Homeview />}
</TabNavigator.Item>
<TabNavigator.Item
tabStyle={styles.tabStyle}
title={tabName[2]}
selected={this.state.selectedTab === 'me'}
selectedTitleStyle={{color: selectedColor}}
renderIcon={() => <Image style={styles.tab} source={this.state.meNormal} />}
renderSelectedIcon={() => <Image style={styles.tab} source={this.state.meSelected} />}
onPress={() => this.setState({ selectedTab: 'me' })}>
{<Homeview />}
</TabNavigator.Item>
</TabNavigator>
);
}
componentWillMount() {
const {selectedColor, normalColor} = this.props;
Icon.getImageSource('md-home', 50, normalColor).then((source) => this.setState({ homeNormal: source }));
Icon.getImageSource('md-home', 50, selectedColor).then((source) => this.setState({ homeSelected: source }));
Icon.getImageSource('md-person', 50, normalColor).then((source) => this.setState({ meNormal: source }));
Icon.getImageSource('md-person', 50, selectedColor).then((source) => this.setState({ meSelected: source }));
Icon.getImageSource('md-compass', 50, normalColor).then((source) => this.setState({ compassNormal: source }));
Icon.getImageSource('md-compass', 50, selectedColor).then((source) => this.setState({ compassSelected: source }));
}
}
const styles = StyleSheet.create({
tabbar: {
height: 49,
alignItems:'center',
justifyContent: 'center',
backgroundColor: '#fff'
},
tabStyle:{
padding: 8
},
tab: {
width: 22,
height: 22
}
});
这里我们需要定义一个默认颜色和选中颜色，还有一个tabBarItem的内容数组，其它的内容真不知道说什么了，就是第三方组件的调用了~~~个人认为， 先自己撸一次代码，不懂就直接查官网api或者搜索下资料，基本上能把大部分问题了。
再看主界面的内容，这个就更加简单了，就是调用了TabBar.js：
'use strict';
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import TabBar from '../components/TabBar';
export default class MainScene extends Component {
constructor(props) {
super(props);
}
render(){
return(
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<TabBar navigator={this.props.navigator}/>
</View>
);
}
}
这样我们在index里面直接调用MainView.js就能实现主界面的效果了：
import React, { Component } from 'react';
import {AppRegistry, Navigator} from 'react-native';
import MainView from './src/view/MainView';
export default class MyGitBook extends Component {
render() {
return (
<Navigator
initialRoute={{component: MainView}}
renderScene={(route, navigator) => {
return <route.component navigator={navigator} {...route.args}/>
}
}/>
);
}
}
AppRegistry.registerComponent('MyGitBook', () => MyGitBook);
目测RN学习已经走出了第一步，后面只有继续坚持，从最简单的做起，一步一步走下去，以前看着api总觉得很简单，但真正写起代码来还是各种懵逼，所以还是从最简单的练习做起。有兴趣围观的可以关注下我。
新手入门RN的同学们，千万不想相信 react native 中文网推荐的东方耀的视频，买了vip入去，发现视频不更新，先不说视频质量怎么样，感觉照搬某课网的，这都可以忍，但天天推广*点公益，也敢叫公益的公益。被骗得不要不要。
