使用RN做專案已經有兩個月了，雖然現在大部分情況下已經使用了Redux，進行狀態的管理和資料的處理，後續會說一下自己是如何使用Redux的，現在先說一下在RN中一個關鍵的資料傳遞問題，雖然後續可能專案中添加了Redux架構，但也不代表這每個頁面都去使用，畢竟為了一個簡單的資料，需要一堆操作，也挺麻煩的。

1 父元件傳遞給子元件資料

這個是比較簡單，也是比較常見的。
比如：官網上props這一節中的這個例子

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native'
 
;

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina'
 
 />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

我們發現類Greeting 是子元件，它在使用父元件LotsOfGreetings 裡面的資料的時候，會填寫屬性name=’XXX’，父元件中這樣寫，子元件就可以利用this.props.name去使用這個資料，所以以後在想從父元件向子元件傳遞資料的時候，就可以利用這種方式。

2 子元件向父元件傳遞資料

這種是大家遇到比較多，且會迷茫的地方，其實原理差不多，也很簡單。
還拿上面的情況來說，我稍加改造一下：

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
_onPressButton(){
this.props.callback("hello wrold");
}
  render() {
    return (
    <TouchableHighlight onPress={this._onPressButton.bind(this)}>
      <Text>Hello {this.props.name}!</Text>
      </TouchableHighlight >
    );
  }
}

class LotsOfGreetings extends Component {
_onPressButton(str){
str....
}
  render() {
    return (
      <View style={{alignItems: 'center'}} callback={this._onPressButton.bind(this)}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

上面是直接props傳遞了資料，這次我利用props傳遞方法，然後使用方法來回調資料，這種方式，如果對state和props熟悉的應該比較容易看懂，子元件執行了父元件的方法，同時會把子元件的資料傳遞過去，這樣父元件中的方法就可以使用子元件的資料。

後續我會再說一下，沒有關係的元件之間是如何傳遞資料的，其實更簡單，就跟Android裡面的監聽是一樣，使用監聽的方式，接收資料，並執行自己的操作即可。