http://www.jianshu.com/p/d4b7f8f322b6最近这段时候,本想做一个小的demo,不过发现,理想和美好,现实很骨感,在做的过程中遇到了很多的问题。最重要的一个问题就是传值的问题,以为RN是一个组件一个组件的的累加,有时候一个页面中的一小部分,可能会被重用,所以要单独拿出来,做一个组件类,你的封装需要考虑通用性,会遇到子组件向父组件传递方法,值得问题。也是自己前期看东西没有那么深入,一直感觉和iOS很多地方很相似,想当然了。
好了废话不多说,这是详细的介绍一下,Navgator跳转,页面传值的问题,和各组件直接如何进行传值。
正向传值
RN页面的跳转是通过Navigator实现的页面跳转,所以一个页面想要跳转就必须渲染一个Navigator。Navigator对于路由的管理是通过栈来管理的,遵循先进后出的原则。Navigator保存在props中。
正向传值比较简单,Navigotor push 方法中需要带一些参数:
push(route:
{
component: Function; 要跳转的路由
title: string; 标题
passProps?: Object; 传递的参数
backButtonTitle?: string; 返回键的名称
backButtonIcon?: Object; 返回键图标
leftButtonTitle?: string; 左边按钮的标题
leftButtonIcon?: Object; 左边按钮的图标
onLeftButtonPress?: Function; 左边按钮的点击事件
rightButtonTitle?: string;
rightButtonIcon?: Object;
onRightButtonPress?: Function;
wrapperStyle?: any; 风格
})
正向传值我们只需把需要传递的内容发在PassProps中,即可,在下一个页面通过props来取,
注意:在此过程我遇到的问题是,跳转过去之后,第二个页面没有取得值,原因是要注意 PassProps的类型是object 我的数据类型传递错误了,所以取不到值。
代码截图:
Home页面 === 第一个页面
HomeDital页面===第二个页面
反正传值
是通过EventEmitter实现事件机制,实现简单的观察者模式,类似于IOS中的Notification。发送端发送通知,接收端接受到通知后,通过状态机来改变渲染。发送端和接受端同时需要引入DeviceEventEmitter组件。
代码截图:
第四个页面
在按钮点击跳转返回的方法中发送通知
第三个页面为接收通知,并且显示通知内容,通过状态机来改变显示内容
通过Navtigator的push方式,传递方法,第二个页面实例化方法传值,第一个页面实现方法,通过状态机渲染到页面。
代码截图
第一个页面
第二个页面往第一个页面传值:
组件之间的通信,传值
组件之间的关系通信传值一般有三种情况:
1.组件嵌套,一个自己是另一个组件的子组件,可以通过,状态机state进行。
2.同一页面的不同组件类,组件为同级关系,通过props通信传值。
3.除了以上2中的关系外的组件,创建一个全局的通信类。在react-Navtive的2014中有demo,这里就不在贴代码了。
这里讲解一下,通信之间传递函数:
就是子组件向父组件一级一级传递函数,通过props实现来实现的。
myCenter组件中包括BaseCell组件,BaseCell组件点击需要跳转到下个页面,这时候就是BaseCell反向传递函数,实现方法和反向传值相同。
代码截图:
BaseCell组件类:
center类组件:
详细的demo地址https://github.com/nanaLxs/React--Native-CommunicateDemo
demo解释:
Home只要说前边页面之间的传值。主要讲解正向和反向传值。
Center类讲的是方法传递。
demo的其他解析
此demo种使用第三方的的tabbar,引用方式:
1.打开终端 -- 打开文件 -输入install react-native-tab-navigator --save 完成后加入封装好的tabbar
感觉有点乱,看的童鞋们,就凑合看看吧!