浅析react-native的Navigator组件01之最简实例

前言：【继续啰嗦的初学者内容】个人认为在RN里面Navigator和Listview算是这套框架中最为重型的两个组件，也是非常常用的组件，同时也是坑比较多的组件。这两个搞清楚点，可以少走很多弯路。所以我打算把这两个组件的细节挖得清楚点，到时候有啥记不起的还可以回来看看。但水平有限，只能比较简单的挖，基本上是边测边挖，大致看看源码，像源码剖析这种深挖还搞不出来。所以初学者看看就好，大牛帮忙纠错……

Navigator原理

这个其实在之前组件生命周期就提到过一点，它的大概原理就是在初始化的时候新建了两个对象，一个是route（路由）数组，一个是navigaotor（导航）对象。前者用于保存一堆页面组件的信息，后者集成了一大堆方法来对页面组件信息进行处理（push、pop、replace等，见之前的文章）。有了这两个对象，我们就能完整的控制页面的跳转。所以初始化完毕之后，需要把两对象都给传到下一个页面组件，这样下一个页面就能继续通过这两个对象来控制页面跳转。另外，在初始化时，还需要指定页面跳转的动画特效，这个之后再细讲。一般来说，我们就只需要这么一次初始化，之后就尽管调用传进来的navigator进行操作就行了。

最简单的Navigator实例

demo在github
其实就是之前生命组件那个demo改的（基于RN 0.17，只写了ios版，不过安卓的把index.ios.js文件内容复制过去，应该通用）。该实例一共有4个js文件:

  • index.ios.js 

    1
    RN入口，对Navigator进行初始化，初始化后会自动跳转指定的firstpage

  • firstpage.js

    1
    第一页，只有一个按钮，就是能push到第二页

  • secondpage.js

    1
    第二页，两按钮，一个push到第三页，一个pop回第一页

  • thirdpage.js

    1
    第三页，一按钮用于pop回第二页

浅析初始化

后面123页的跳转和返回的代码非常简单，通过this.props获取传过来的navigator对象，然后调用里面的push或者pop方法进行跳转和返回。push的参数为一个route数组中的route对象，比如{component:Secondpage}，这个Secondpage为导入(import)的实际页面对象名称。稍微复杂点是初始化代码，即index页面调用组件的内容。

1
2
3
4
5
6
7
8
9
10
<Navigator
    initialRoute={{component: Firstpage}}

    configureScene={(route)=> {return Navigator.SceneConfigs.VerticalDownSwipeJump;}}

    renderScene={(route, navigator)=> {
        let Component = route.component;
        return <Component  navigator={navigator}/> 
    }} 
/>

组件中有3个参数。

  • 第一个是initialRoute，大意是初始化route，需要提供一个route对象（代表某个指定页面），用于初始化完毕之后自动跳转该页面。
  • 第二个参数叫做configureScene，大意为配置组件（的特效），就是我们之前说的，需要指定一个页面跳转的特效动画，这个之后细讲，现在知道反正这么写就是了。
  • 第三个参数renderScene，大意为渲染组件（或生成组件），接受一个回调函数，这个回调函数最终需要返回一个组件，这个组件就是我们跳转之后的页面组件。回调函数会使用两个参数，这2个参数就是之前说到的，route对象（注意不是数组，仅仅是类似{component: Firstpage}这种样式的对象）和navigator对象。从route对象里面取出对应的组件（component），然后直接返回这个组件，同时把navigator对象给传进去。

这段代码的运行流程，你可以大致这么理解：先初始化route数组和navigator，然后从initialRoute的收到第一个页面信息，再从configureScene收到跳转动画信息，再把initialRoute页面信息丢给route数组，再从renderScene获取到渲染组件的方法，把页面信息和navigator都丢给这个方法，进行初始化后的自动跳转。当然真正的细节不可能那么少，能帮助理解这个初始化信息就行。

好了，最简单的navigator就是这样，之后会慢慢的把它给搞复杂点，以承载更多的需求。