React-Native(Navigator传值)

1. 本文主要简要说明二级向一级页面传值，及一级到二级界面的跳转传值

看我下面的例子：（直接上图）

首页图

图有点大，不好意思。
下面先讲解下我的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来实现的。

1. 首先我们可以看到在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