在原生的iOS中，现在很多的项目结构都是UITabBarController和UINavigationController嵌套使用的，在ReactNative中要实现TabBarIOS和NavigatorIOS的嵌套，流程和原生的iOS非常相似，这篇文章将介绍这两者的嵌套，因为我是做iOS开发的，所以只会与iOS中的流程进行对比，Android的同学可以参考一下。
本文的Demo最终要实现的效果如下:
1. 文件结构
这个Demo中所创建的文件结构如下图：
- HomePage.js 代表首页面
- FavorPage.js 代表TabBar的第二个页面（收藏页面）
- NextPage.js 是首页push进入的第二个页面
- MyTabBar.js 是自己创建的TabBar和Navigator组件
2.TabBarIOS 和 TabBarIOS.Item的基本使用
1）封装自定义TabBarIOS组件
ReactNative的TabBarIOS组件的使用其实跟我们在iOS中使用UITabBarController很相似。而TabBarIOS.Item类似于iOS开发中的每个childViewController。
在iOS开发中，要创建一个UITabBarController，我们需要先创建出对应的child ViewController，存入到UITabBarController的viewControllers属性中，然后我们可以通过设置child ViewController的tabBarItem属性来配置BarItem。
在ReactNative中，要创建一个TabBarIOS，我们先创建对应的TabBarIOS.Item组件，将它们封装在TabBarIOS组件中，然后同样的，通过设置TabBarIOS.Item的属性来配置BarItem。
TabBarIOS组件的属性主要有下面几个： TabBarIOS
- barTintColor: 标签栏的背景颜色。
- tintColor: 当前被选中的标签图标的颜色。
- unselectedItemTintColor: 当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效
- translucent: 一个布尔值，决定标签栏是否需要半透明化。
TabBarIOS.Item组件的属性主要有下面几个： TabBarIOS.Item
- badge: 在图标右上角显示一个红色的气泡。
- icon: 给当前标签指定一个自定义的图标。如果定义了systemIcon属性， 这个属性会被忽略
- onPress: 当此标签被选中时调用。你应该修改组件的状态来使得selected={true}。
- selected : 这个属性决定了子视图是否可见。如果你看到一个空白的页面，很可能是没有选中任何一个标签。
- selectedIcon: 当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性，这个属性会被忽略。如果定义了icon而没定义这个属性，在选中的时候图标会染上蓝色。
- systemIcon: 一些预定义的系统图标。注意如果你使用了此属性，标题和自定义图标都会被覆盖为系统定义的值。
- title: 在图标下面显示的标题文字。如果定义了systemIcon属性，这个属性会被忽略。
打开MyTabBar.js文件，开始封装TabBarIOS组件，下面是代码标注的图，可以根据图上的步骤来理解:
下面是MyTabBar.js中的代码
import HomePage from './HomePage'
import FavorPage from './FavorPage'
export default class MyTabBar extends Component {
constructor(props) {
super(props);
this.state = {
selectedBarItem : 'home'
}
}
render() {
return (
<TabBarIOS
barTintColor = 'white'
tintColor = 'green'
unselectedItemTintColor = 'gray'
translucent = {true}
>
<TabBarIOS.Item
title = '首页'
icon = {require('./Image/home.png')}
selectedIcon = {require('./Image/home-selected.png')}
selected = {this.state.selectedBarItem === 'home'}
onPress = {()=>{this.setState({selectedBarItem:'home'})}}
>
<HomePage></HomePage>
</TabBarIOS.Item>
<TabBarIOS.Item
title = '收藏'
systemIcon = 'favorites'
selected = {this.state.selectedBarItem === 'favor'}
onPress = {()=>{this.setState({selectedBarItem:'favor'})}}
>
<FavorPage></FavorPage>
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
其中HomePage和FavorPage的代码由于篇幅有限就不贴出来了，就是简单的页面颜色样式展示一下。
然后，在项目的index.ios.js文件中，导入MyTabBar组件，并使用,就可以看到效果了。
import MyTabBar from './app/MyTabBar'
export default class TabBar_Navigator extends Component {
render() {
return (
<MyTabBar></MyTabBar>
);
}
}
3. NavigatorIOS的基本使用
TabBarIOS加入之后，我们需要在首页上加入一个NavigatorIOS组件，来控制页面的跳转。
ReactNative中的NavigatorIOS组件我们主要需要实现三个属性:
initialRoute : 初始化路由，这个属性其实跟iOS开发中
UINavigationController的rootViewController非常相似,将导航控制器的根页面在这个属性中配置好。configureScene: 这个属性是一个可选的函数，用来配置场景动画和手势，这个函数有两个参数，一个是路由，一个是当前的路由栈。转场动画的类型有很多，可以在
项目目录\node_modules\[React](http://lib.csdn.net/base/react)-native\Libraries\CustomComponents\Navigator\NavigatorSceneConfigs.js这个文件中查看。renderScene: 这个属性是必要参数，用来渲染指定路由的场景。调用的参数是路由和导航器。在这个方法中，我们可以通过路由获取到当前需要渲染的页面，然后把导航器作为一个属性传给当前页面，最后将这个页面返回出去。在这个被渲染的页面中，就可以拿到导航器来进行push操作了（这一点比较难理解，可以在网上多找一些资料看看，其实我也理解的不是很好）。
因为要在HomePage中嵌入导航器，所以将上一步中TabBarIOS.Item中的<HomePage></HomePage>内容替换为下面的内容:
<NavigatorIOS
style={{flex:1}}
initialRoute = {{
component: HomePage,
title: '首页'
}}
configureScene = {(route) =>
{
return NavigatorIOS.SceneConfigs.FloatFromBottom;
}
}
renderScene = { (route, navigator) => {
let HomePage = route.component;
return <HomePage navigator={navigator}/>
}}
>
</NavigatorIOS>
在首页面中，我们需要在按钮点击之后，从this.props中拿到navigator，然后通过navigator.push()方法来推出下一页面。代码如下：
export default class HomePage extends Component {
_gotoNextPage() {
this.props.navigator.push({
name: 'NextPage',
component: NextPage
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>这是首页</Text>
<TouchableOpacity style={styles.nextBtn} onPress={this._gotoNextPage.bind(this)}>
<Text style={styles.nextText}>进入下一页</Text>
</TouchableOpacity>
</View>
);
}
}
最后，我们就可以得到本文开头的效果了。
本文Demo代码
总结：
ReactNative中的TabBarIOS和NavigatorIOS的使用其实跟iOS开发中的使用非常相似，在写代码的时候可以跟iOS对比着去理解，可能会更好。
最近刚入坑RN，了解的不多，本文只是作为一个iOS开发者的一些RN总结，希望能帮助到需要了解的人。可能有哪些地方写的有问题，可以提出来，也是对我的帮助。有想要学习RN的同学如果需要视频教程或者一些书籍，可以私信我。
