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