前面几篇可以说比较基础，这篇讲一个对新手来说是一个难点——RN中的路由。
也许小伙伴们接触过React中的路由 react-router，然而在react-router是针对浏览器的，在app中无用，更别说我在做RN前还没写过react。
不逼逼了，我们这次要讲的是app中的路由——Navigator。看到这个词，写过原生应用的可能就知道是怎么回事了，没错这就和iOS中的NavigatorController差不多，估计就是直接用的。
Navigator组件主要有两个变量，一个是route，一个是navigator。每一个路径都是一个路由，navigator是装路由的数组。理解了这个我们不难想到，把一个route路径push进入navigator，我们的app就回跳转过去了，反之pop出来就返回上一个页面。
Navigator还有几个常用属性：
initialRoute: 初始化路径，
renderScene: 渲染页面逻辑函数，
configureScene: 配置页面跳转效果。
我们来看一下简单的实现:
假如我们首页组件是Home， 我说们只需要调用
navigator.push({component: Home, params: {} });
就可以跳转到主页了。当然我在里面加了initialRoute属性，所以默认就在首页了。
本来写到这这个路由就讲的差不多了，但好像没讲多少，这又尴尬了。只能补点干货了。从 上面的代码可以看出我们的是如何来定义一个页面的路由Route。
route有两个参数， component 和 params。component的代表该页面的主见，params表示该组件的属性，那么params具体是什么呢。
首先我们需要理解 {...route.params} 这个用法。这是ES6与React结合起来的语法。如果在组件的标签中加入了 ‘...’ 符号，component就会将这个js对象中的属性全部作为props属性传到组件内部。
其次我们就可以想一下，params里到底该该传哪些东西。很简单，组件里需要哪些props，我们就往params里塞哪些东西。
我们还往组件里单独穿了一个props —— navigator，也就是路由的数组。这是干嘛呢？不把数组传进去我们怎么返回上一页呢？就是这么一回事，只要在组件里调用
this.props.navigator.pop();
就可以返回上一页了同时navigator里也有其他的方法，比如jumpTo(), reset()都可以调用。
最后，大家可以思考一下：
如果按照上述的方式实现，那我在跳转页面的时候，我需要把跳转到页面的组件引入，我们直接把组件的名字当成唯一的标识，这样真的好么？？？会有什么弊端？？？
留个问题给大家，下一期可能要过几天，有个厉害的东西要研究一下！hiahiahiahiahiahiahia～
网友评论