前言

前段時間給大家介紹了一些常用的組件，這些其實能完成一些最基礎(chǔ)的頁面，那么今天給大家介紹一下組件參數(shù)傳遞。至于navigator,我以前寫了一篇文章，簡單的介紹了一下，想看的可以看一下這里，react-native 簡單的導航,那么更詳細的文章在這里新手理解Navigator的教程。

正向傳值

正向傳值還是比較簡單的，我們使用navigator的屬性來傳遞給下一個頁面。
在我們push到下一個頁面的時候我們可以把值包含在params里面

this.props.navigator.push({
            component: SecondPage,
            params: {
                secondValue: '這是傳遞到第二頁的數(shù)據(jù)',   
                //第二頁通過this.props.secondValue獲取secondValue的值。
            }
        })

然后我們可以在第二個頁面來使用this.props.secondValue獲取secondValue的值，這樣我們就把第一頁的值傳遞到第二頁了。

反向傳值

反向傳值有兩種方法，第一種是回調(diào)，第二種是通過EventEmitter實現(xiàn)事件機制。

回調(diào)

我們需要在第一個頁面navigator的push方法中的params里面加入回調(diào)函數(shù)

this.props.navigator.push({
                        component: Third,
                        params: {
                            callback: ((word) => {
                                this.setState({
                                    next: word
                                })
                            }),   
                            
                            //這里同時還可以添加值傳遞到第二個頁面
                        },
                    });

callback: ((word) => {this.setState({next: word})});
我們通過word來接收第二個頁面?zhèn)鬟f過來的值，然后實現(xiàn)回調(diào)函數(shù)，這里是直接實現(xiàn)修改this.state.next的值。

那么我們第二個頁面如何實現(xiàn)把值傳遞過來呢？

this.props.navigator.pop();  
this.props.callback('我是navigator反向傳值');

在第二個頁面的返回方法中加入上面的語句就可以了，'我是navigator反向傳值'是我們傳遞給第一個頁面的數(shù)據(jù)。

EventEmitter事件機制傳值

其實也就是觀察者模式。發(fā)送端發(fā)送通知，然后接收端接收通知改變狀態(tài)。那么我們?nèi)绾稳プ瞿兀?br> 首先，我們的兩個頁面需要引進DeviceEventEmitter組件，引入方法和Text、View等一樣。

DeviceEventEmitter.addListener('test', (value) => {
            this.setState({
                name: value
            });
        })  

我們需要在第一個頁面中加入這個方法，'test'是我們在第二個頁面注冊的名稱，value就是第二個頁面?zhèn)鬟f過來的值，我們實現(xiàn)setState方法后，this.state.name就是我們第二個頁面?zhèn)鬟f過來的值。那么第二個頁面要如何做呢？

DeviceEventEmitter.emit('test', '我是DeviceEventEmitter反向傳值');

我們只需要在返回的方法里面注冊一下通知就可以了，test是注冊的名稱，后面跟的這個是我們需要傳遞給第一個頁面的數(shù)據(jù)。

組件之間的通訊

父組件傳值給子組件

這種傳遞可以用props來傳遞。
比如說我們的父組件是一個View,View里面包含一個我們自定義的組件，自定義組件里面有一個Text的文本，我們?nèi)绾卧诟附M件中修改Text的文本呢？

export default class Fview extends Component {
   render() {
      return (
         <View>
         <MyView text='子組件'/>
      </View>
      );
   }
}
class MyView extends Component {
   render() {
      return (
         <Text>{this.props.text}</Text>{/*通過props傳值*/}
      );
   }
}

子組件傳遞給父組件

類似于ListView的cell點擊方法傳遞。
比如說我們新建一個自定義組件。

//我們的子組件
'use strict';

import React, {
  Component
} from 'react';

import {
  StyleSheet,
  View,
  TouchableOpacity,
  Text
} from 'react-native';

class TestSend extends Component {
  render() {
    return (
      <TouchableOpacity onPress=?>{/*如何把這個點擊方法傳遞給父組件？*/}
            <View style={styles.innerViewStyle}>
              <Image style={{width:70,height:70,marginTop:19}} source={{uri:data.image}}/>
              <Text style={{marginTop:6}}>{data.subjectName}</Text>
            </View>
        </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
innerViewStyle: {
    width: 50,
    height: 50,
    // justifyContent:'center',  
    alignItems: 'center',
  }
});


export default TestSend;

我們的父組件要使用這個子組件，然后實現(xiàn)點擊這個子組件觸發(fā)某個方法，并且把子組件的值傳遞給父組件，該怎么寫？

render() {
      return (
         <View>
            <TestSend/>{/*???*/}
         </View>
      );
   }  

我們需要加入回調(diào)方法，子組件中寫上

<TouchableOpacity onPress={()=>this.props.callBackFunc(data)}>  
</TouchableOpacity>

其中data就是我們傳遞給父組件的數(shù)據(jù)
父組件中

<TestSend callBackFunc={(rowdata)=>{this.popToList(rowdata)}}/>  
......  
popToList(rowdata) {
    //我們在父組件中實現(xiàn)的方法，rowdata是我們的子組件傳遞過來的數(shù)據(jù)。
}

源碼我會上傳至React-Native-Study