ReactNative中TabBarIOS和NavigatorIOS嵌套使用

字数 1481阅读 1315

在原生的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组件
ReactNativeTabBarIOS组件的使用其实跟我们在iOS中使用UITabBarController很相似。而TabBarIOS.Item类似于iOS开发中的每个childViewController
在iOS开发中,要创建一个UITabBarController,我们需要先创建出对应的child ViewController,存入到UITabBarControllerviewControllers属性中,然后我们可以通过设置child ViewControllertabBarItem属性来配置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>
    );
  }
}

其中HomePageFavorPage的代码由于篇幅有限就不贴出来了,就是简单的页面颜色样式展示一下。

然后,在项目的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开发中UINavigationControllerrootViewController非常相似,将导航控制器的根页面在这个属性中配置好。

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

推荐阅读更多精彩内容