React Native的原生路由

新项目移动端要用React-native搭建,因而又开启了新一波学习之旅

文档里查到的Navigator例子均为使用Navigator做为某个组件render方法的惟一返回值,这在某些状况下有些不符合人类思惟(或者说是个人思惟...),例如:
微信,典型的上中下布局,进入消息/朋友/朋友圈分别指向三个页面,他们在互相切换时主要是页面中间部分发生改变,上部只是改变了几个文字,下部只是当前tab页的图标变为高亮

在这种需求下
1、我理想的实现方式为:

<View>
<Header />
<Navigator />
<Footer />
</View>

在Navigator的renderScene里根据路由改变当前组件的state,从而让Header和Footer根据state渲染出不一样的内容或样式

try了一下不太行, 展现出的只有Header而已,彷佛不做为组件惟一返回值的Navigator根本不会显示
想去找一下这个组件的 renderScene函数实现 功力不够,没找到...

 

持之以恒地重试了一下后,解决了 思路为:

    0.react以及rn有着很完备的错误检测以及报错信息,既然没报错,猜测用法没问题
    1.在由Navigator渲染的组件Login的render方法里加了个alert,发现弹出了,说Navigator的功能正常,更加剧了个人怀疑
    2.给包裹Navigator的view层加了背景色,发现它不是全屏的,猜测可能navi是异步渲染的,致使父组件没有撑开
    3.改变view的高度,发现露出了Login组件!!能够了!!以前没显示果真是由于container没撑开,把它挡住了

2、在(一)尚未搞定的时候,我退而求其次,采用路由提早声明的方式? 

   能够使用Navigator的initialRouteStack属性来初始化路由栈
   Navigator的renderscene函数能够返回另外一个Navigator,经过这种依次嵌套的方式像react-router同样提早声明好整个用用的路由

 

3、navigationBar的使用?
    1.使用原生的<Navigator.NavigationBar> 该组件有一个routeMapper属性,该属性的值须要对象类型
该对象(可)包含三个固定的属性,均为函数,返回值为组件

LeftButton(route, navigator, index, navState) {
//return Component
}
Title(route, navigator, index, navState) {
//return Component
}
RightButton(route, navigator, index, navState) {
//return Component
}

注:<Navigator.NavigationBar>的源码位置在

node_modules\react-native\Libraries\CustomComponents\Navigator

 

   2.上面的方法有必定的局限性,好比有4个按钮就没办法了,我猜测应该是能够使用自定义对象的! 持续更新!

 

该探路项目的地址为https://github.com/youmuFE/reactNativeDemo 欢迎交流