TabBarIOS部分
在目前市面上的APP中，大部分都是选项与选项之间的切换，比如：微信、微博、QQ空间......, 在iOS中，我们可以通过TabItem类进行实现。那么，在React Native中，我们应该怎么实现呢？
在React Native中可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件是不支持Android的，当然后面我们可以自定义该组件。
一、TabBarIOS常见的属性
View的所有属性都可以被继承
barTintColor color 设置tab条的背景颜色
tintColor color 设置tab条上被选中图标的颜色
translucent bool 设置Tab栏是不是半透明的效果
二、TabBarIOS.Item常见的属性
badge number
在图标的右上方显示小红色气泡，显示信息
icon Image.propTypes.source
Tab按钮自定义的图标，如果systemicon属性被定义了，那么该属性会被忽略
onPress function
当Tab按钮被选中的时候进行回调，你可以设置selected={true}来设置组件被选中
selected bool
该属性标志子页面是否可见，如果是一个空白的内容页面，那么一定是忘记了选中任何的一个页面标签Tab
selectedIcon Image.propTypes.source
设置当Tab按钮被选中的时候显示的自定义图标，如果systemIcon属性被设置了，那么该属性会被忽略。如果定义了icon属性，但是当前的selectedIcon属性没有设置，那么该图标会被设置成蓝色
style 设置样式风格，继承View的样式各种风格
systemIcon
enum(‘bookmarks‘,‘contacts‘,‘downloads‘,‘favorites‘,‘featured‘,‘history‘,‘more‘,‘most-recent‘,‘most-viewed‘,‘recents‘,‘search‘,‘top-rated‘)
系统预定义的图标，如果你使用这些图标，那么你上面设置的标题，选中的图标都会被这些系统图标所覆盖。
title string
在Tab按钮图标下面显示的标题信息，如果你设置了SystemIcon属性，那么该属性会被忽略
三、TabBarIOS.Item案例展示
代码展示：
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from ‘react‘; import { AppRegistry, StyleSheet, Text, View, Image, TabBarIOS } from ‘react-native‘; var Car = require(‘./Car.json‘); export default class FListViewDemo1 extends Component{ constructor(props){ super(props); this.state = { selectedTabBarItem:‘home‘ }; } render(){ return( <View style={styles.container}> <View style={styles.headerViewStyle}> <Text style={{color:‘white‘}}>Tab选项卡切换</Text> </View> <TabBarIOS barTintColor=‘white‘> <TabBarIOS.Item systemIcon="contacts" badge="3" // title="张三" selected={this.state.selectedTabBarItem == ‘home‘} onPress ={()=>{this.setState({selectedTabBarItem:‘home‘})}} > <View style={[styles.commentViewStyle,{backgroundColor:‘red‘}]}> <Text>首页</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="bookmarks" // title="李四" selected={this.state.selectedTabBarItem == ‘second‘} onPress ={()=>{this.setState({selectedTabBarItem:‘second‘})}} > <View style={[styles.commentViewStyle,{backgroundColor:‘green‘}]}> <Text>第二页</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="contacts" // title="王二" selected={this.state.selectedTabBarItem == ‘third‘} onPress ={()=>{this.setState({selectedTabBarItem:‘third‘})}} > <View style={[styles.commentViewStyle,{backgroundColor:‘blue‘}]}> <Text>第三页</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="contacts" // title ="麻子" selected={this.state.selectedTabBarItem == ‘four‘} onPress ={()=>{this.setState({selectedTabBarItem:‘four‘})}} > <View style={[styles.commentViewStyle,{backgroundColor:‘purple‘}]}> <Text>第四页</Text> </View> </TabBarIOS.Item> </TabBarIOS> </View> ); } } const styles = StyleSheet.create({ headerViewStyle:{ height:64, backgroundColor:‘black‘, justifyContent:‘center‘, alignItems:‘center‘ }, commentViewStyle:{ flex:1, alignItems:‘center‘, justifyContent:‘center‘ }, container:{ flex:1, backgroundColor:‘#f5fcff‘ } });
提示：在TabBarIOS.Item中，如果设置了systemIcon，再去设置title将不会起作用。
Navigator部分
在开发中，我们需要实现多个界面的切换，这时候就需要一个导航控制器来进行各种效果的切换。那么，在React Native中有两个组件能够实现这样的效果：Navigator和NavigatorIOS。
其中Navigator是适配Android和iOS，而NavigatorIOS则是包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。
一、Navigator
很多时候，我们需要导航器来应对不同场景（页面）间的切换。它通过路由对象来分辨不同的场景，我们这里采用的就是 renderScene 方法，根据指定的路由来渲染。
1.1 常用的属性
initialRoute ={{ name: ‘home‘, component: HomeScene }}
这个指定了默认的页面，也就是启动的组件页面
configureScene ={() => {
return Navigator. SceneConfigs .HorizontalSwipeJump;
}}
页面之间跳转时候的动画手势，可以看这个目录:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)，比如：PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump等等。
renderScene
具体是方法如下:(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />
两个参数中的route包含的是initial的时候传递的name和component，而navigator是一个我们需要用的Navigator的对象；
所以当我们拿到route中的component的时候，我们就可以将navigator传递给它，正因为如此，我们的组件HomeScene才可以通过 this.props.navigator，拿到路由。
initialRouteStack [object] 参数对象数组
这是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组
navigationBar node
该为可选的参数，在页面切换中用来提供一个导航栏
navigator object
该为可选参数，可以从父类导航器中获取导航器对象
sceneStyle 样式风格
该继承了View视图的所有样式风格，用于设置每个页面容器的风格
1.2 常用的导航器方法
当获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能:
getCurrentRoutes() 该进行返回存在的路由列表信息
jumpBack() 该进行回退操作 但是该不会卸载(删除)当前的页面
jumpForward() 进行跳转到相当于当前页面的下一个页面
jumpTo(route) 根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)
push(route) 导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去
pop() 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面
replace(route) 只用传入的路由的指定页面进行替换掉当前的页面
replaceAtIndex(route,index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面
replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面
resetTo(route) 进行导航到新的界面，并且重置整个路由栈
immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈
popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除
popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除
1.3 默认写法
<Navigator initialRoute={{ name: defaultName, component: defaultComponent }} configureScene={(route) => { return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight; }} renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.props} navigator={navigator} /> }} />
二、Navigator.IOS
NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。
2.1 常用的导航器方法
push(route)
导航器跳转到一个新的路由。
pop()
回到上一页。
popN(n)
回到N页之前。当N=1的时候，效果和 pop() 一样。
replace(route)
替换当前页的路由，并立即加载新路由的视图。
replacePrevious(route)
替换上一页的路由/视图。
replacePreviousAndPop(route)
替换上一页的路由/视图并且立刻切换回上一页。
resetTo(route)
替换最*的路由并且回到它。
popToRoute(route)
一直回到某个指定的路由。
popToTop()
回到最顶层的路由。
2.2 常用的属性
barTintColor string
导航条的背景颜色。
initialRoute {
component: function, // 路由到对应的版块
title: string, // 标题
passProps: object, // 传递的参数
backButtonIcon: Image.propTypes.source, // 返回按钮
backButtonTitle: string, // 返回按钮标题
leftButtonIcon:Image.propTypes.source,
leftButtonTitle: string,
onLeftButtonPress: function,
rightButtonIcon: Image.propTypes.source,
rightButtonTitle: string,
onRightButtonPress: function,
wrapperStyle: [object Object]
}
NavigatorIOS使用"路由"对象来包含要渲染的子视图、它们的属性、以及导航条配置。"push"和任何其它的导航函数的参数都是这样的路由对象。
比如：下面新闻列表跳转到新闻详情页详情页：
itemWrapperStyle View#style
导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色。
navigationBarHidden bool
一个布尔值，决定导航栏是否隐藏。
shadowHidden bool
一个布尔值，决定是否要隐藏1像素的阴影。
tintColor string
导航栏上按钮的颜色。
titleTextColor string
导航器标题的文字颜色。
translucent bool
一个布尔值，决定是否导航条是半透明的。
三、综合小案例
3.1 部分核心代码
React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件