RN中子组件和父组件之间的数据传递问题

使用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里面的监听是一样，使用监听的方式，接收数据，并执行自己的操作即可。