React native从入门到深入 ---页面传值,父子组件传值

前言

最近这段时候,本想做一个小的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页面 === 第一个页面


React native从入门到深入 ---页面传值,父子组件传值_第1张图片

HomeDital页面===第二个页面


React native从入门到深入 ---页面传值,父子组件传值_第2张图片

反正传值

第一种

是通过EventEmitter实现事件机制,实现简单的观察者模式,类似于IOS中的Notification。发送端发送通知,接收端接受到通知后,通过状态机来改变渲染。发送端和接受端同时需要引入DeviceEventEmitter组件。

代码截图:

第四个页面

在按钮点击跳转返回的方法中发送通知


React native从入门到深入 ---页面传值,父子组件传值_第3张图片

第三个页面为接收通知,并且显示通知内容,通过状态机来改变显示内容

React native从入门到深入 ---页面传值,父子组件传值_第4张图片

第二种

通过Navtigator的push方式,传递方法,第二个页面实例化方法传值,第一个页面实现方法,通过状态机渲染到页面。

代码截图

第一个页面


React native从入门到深入 ---页面传值,父子组件传值_第5张图片

第二个页面往第一个页面传值:


React native从入门到深入 ---页面传值,父子组件传值_第6张图片

组件之间的通信,传值

组件之间的关系通信传值一般有三种情况:

1.组件嵌套,一个自己是另一个组件的子组件,可以通过,状态机state进行。

2.同一页面的不同组件类,组件为同级关系,通过props通信传值。


React native从入门到深入 ---页面传值,父子组件传值_第7张图片

3.除了以上2中的关系外的组件,创建一个全局的通信类。在react-Navtive的2014中有demo,这里就不在贴代码了。

这里讲解一下,通信之间传递函数:

就是子组件向父组件一级一级传递函数,通过props实现来实现的。

myCenter组件中包括BaseCell组件,BaseCell组件点击需要跳转到下个页面,这时候就是BaseCell反向传递函数,实现方法和反向传值相同。

代码截图:

BaseCell组件类:


React native从入门到深入 ---页面传值,父子组件传值_第8张图片

center类组件:


React native从入门到深入 ---页面传值,父子组件传值_第9张图片

详细的demo地址https://github.com/nanaLxs/React--Native-CommunicateDemo

demo解释:

Home只要说前边页面之间的传值。主要讲解正向和反向传值。

Center类讲的是方法传递。

demo的其他解析

此demo种使用第三方的的tabbar,引用方式:

1.打开终端 -- 打开文件 -输入install react-native-tab-navigator --save 完成后加入封装好的tabbar


React native从入门到深入 ---页面传值,父子组件传值_第10张图片


React native从入门到深入 ---页面传值,父子组件传值_第11张图片

感觉有点乱,看的童鞋们,就凑合看看吧!

你可能感兴趣的:(React native从入门到深入 ---页面传值,父子组件传值)