前面几篇可以说比较基础,这篇讲一个对新手来说是一个难点——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~