谈谈我对 RN Navigator的理解

React Native的Navigator，理解起来相对来说不太容易，经过一些实践之后谈谈我的理解。参考的是这篇文章的代码

零

首先从原理上，Navigator是用来作为组件之间的导航器。而缺乏类似Router性质的东西时，最简单的办法是将下个组件（也叫场景Scene），直接告诉导航器。所以就需要在页面的上面引入下个组件。另外就是不要忘记引入 Navigator。

一

export default class SampleComponent extends React.Component {
        render() {
            let defaultName = 'FirstPageComponent';// 第一个要展示的组件
            let defaultComponent = FirstPageComponent;
            return (
            <Navigator
              initialRoute={{ name: defaultName, component: defaultComponent }}
              configureScene={(route) => {
                return Navigator.SceneConfigs.VerticalDownSwipeJump;
              }}
              renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
              }} />
            );
        }
    }

initialRoute={{ name: defaultName, component: defaultComponent }}
Navigator实现跳转，是通过Push和Pop方法，相当于是一个数组，每要跳到下个Scene（场景），就把下个页面push到这个数组中，当想要后退的时候，再把这个Pop出去。所以这个数组里存放的肯定是能索引到这个Scene的数据，所以理所应当存放一个Component键是合理的。这里initialRoute的时候除了Component还引入了一个name，这个是可选的，不要也行。
defaultName和defaultComponent存放的就是你要render的第一个Scene，相当于跳转的起点，不一定是就是要点击的那个组件，但必须是包含在里面的。

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

这里定义了跳转的过渡动画，如果你的编辑器支持的话，可以删掉最后一节，看看最其他的选项。
renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }}
这个段代码执行过后，就将你的“defaultComponent”渲染出来了，其中route.componet就是在initialRoute里写进去的component。
return <Component {...route.params} navigator={navigator} />

渲染了你要展示的第一个页面，还顺便把几个参数写了进去，...route.params这个语法是要展开所有params，现在你initialRoute的时候没有写 params，但是以后在页面之间传递参数的时候就会要写的。假如，InitialRoute的时候写了：

initialRoute={{ name: defaultName, component: defaultComponent params:{ id:123} }}

这就相当于：

return <Component id={route.params.id} navigator={navigator} />

对，就是这么神奇。你会发现就可以在你渲染的页面里，通过this.props.id找到这个参数了，当然还有后面传入的navigator，你也可以在props中找到。

二

现在只是刚刚定义好了导航器而已，在现在这个渲染的组件里，找一个可以Touchable开头的组件，在属性里写个onPress={}属性。假设点击这个组件，就要前往下个页面。

此时导航器需要知道下一个Scene是哪里，所以先在头部将需要跳转的Scene引入。

在点击事件的回调函数里，

 _pressButton(id) {
    const {navigator} = this.props;
    if (navigator) {
      navigator.push({
        name: 'StoryTeller',
        component: StoryTeller,
        params: {
          id: id
        }
      })
    }
  }

const {navigator} = this.props; 这么写相当于 const navigator = this.props.navigator

点击事件发生后，需要要把下个Scene给Push到navigator中，同样还有看起来没什么用的name。注意这里同样传了params，在这里不用手动return出来要加载的页面了，navigator会依照之前的模式，直接开始渲染。相当于：
<StoryTeller id={id} name='StoryTeller' navigator={this.props.navigator} />

三

跳回来，使用的是Pop方法。和Push类似，不过不用写参数：

  onBackAndroid = ()=> {
    const nav = this.props.navigator;
    const routers = nav.getCurrentRoutes();
    if (routers.length > 1) {
      nav.pop();
    }
  };

navigator 对象里最后进去的，一定是当前的页面，所以初始化的时候数组的长度为1，这里有一个判断，当这个数组的=1的时候，就不再跳转，直接执行退出应用。这里适合具有多次点击返回时候(例如安卓返回键)，一般的点击返回直接执行navigator的Pop方法即可。

  _pressButton() {
        const { navigator } = this.props;
        if(navigator) {
            navigator.pop();
        }
    }

谈谈我对 RN Navigator的理解

零

一

二

三

推荐阅读更多精彩内容