- 本文主要简要说明二级向一级页面传值,及一级到二级界面的跳转传值
看我下面的例子:(直接上图)
图有点大,不好意思。
下面先讲解下我的app的整体页面级别
1.整体是Tabbar包装Nav,其中Tabbar和Nav在Main.js中编写。
部分代码:
2.首页在Home.js中
部分代码:
可以看到我在直接使用ScrollView作为最外部的view
下面的注释我也写的很清楚,eg:轮播图、按钮等等。
3.HomeButton.js中添加了9个button。
刚开始 学习就直接用一个组件复制了9次。。。。。
下面是button组件
至此,部分重点代码就到此了,下面开始讲解如果在button组件中响应用户点击进行跳转呢?
学过iOS开发的同学都知道用我们可以试用代理(delegate)或者回调(callback)或者通知(Notification)来实现,其实呢RN也是可以的,下面我使用callback来实现的。
-
首先我们可以看到在button组件中定义了一个回调函数callBackClickCell: null 来接受用户的点击响应,
在TouchableOpacity组件的onPress中接受点击事件,在clickButton方法中传入当前点击按钮的title
可以看到我标注红色方框的代码:
2.同样的在clickButton方法中我们让这个值也就是title传到上级的组件
在此直接写this.props.callBackClickCell(title)就ok了。把title作为参数传递上级组件。
3.在我们的HomeButton组件中子组件Button中执行回调(callBackClickCell)并吧参数传递到上级组件这里要注意的是在HomeButton中也要写个回调,因为HomeButton相对于Home来说也是其中的子组件。
在HomeButton组件中定义好了回调之后我们就可以直接在Button组件中把Button的参数接收过来了。
(title)=>{this.props.popToHome(title)}
4.最后我们在Home中拿到了HomeButton传递过来的参数就可以最对应的操作了
到此为止我们已经简单的介绍了子组件如何向父组件传值。
下面我们就看看怎么从父组件怎么跳转二级界面
接上面的例子,我们在HomeButton组件的回调中拿到了button的title,那么我们就做个简单的跳转二级页面显示个标题吧!
1.在HomeButton的回调中执行pushDetail函数。
title就是子组件传递来的参数。
因为Home是直接包装的Nav中的,所以我们可以在Home中直接通过this.props.navigator直接拿到导航,通过push方法进行跳转,
下面讲解下push的参数:
component:需要跳转的下级界面。
title:下级界面的标题
barTintColor:下机界面的导航条颜色
passProps:传递给下机界面的一些值,这里可以是多个,以键值对的形式并用逗号分割,如上图我只传了title。
附上下级界面:
由于我在Home中pushDetail方法中写了text属性,所以我可以在PushDetail中直接通过this.props.text来获取到值并显示出来。