ReactNative中TabBarIOS和NavigatorI

在原生的iOS中，现在很多的项目结构都是UITabBarController和UINavigationController嵌套使用的，在ReactNative中要实现TabBarIOS和NavigatorIOS的嵌套，流程和原生的iOS非常相似，这篇文章将介绍这两者的嵌套，因为我是做iOS开发的，所以只会与iOS中的流程进行对比，Android的同学可以参考一下。

本文的Demo最终要实现的效果如下:

最终效果.gif

1. 文件结构

这个Demo中所创建的文件结构如下图：

文件结构.png

• 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组件，下面是代码标注的图，可以根据图上的步骤来理解:

代码标注.png

下面是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的同学如果需要视频教程或者一些书籍，可以私信我。