在日常开发过程中，组件之间的通信我们应该经常用到，也是我们开发过程中不可或缺的一部分。组件可以分为父子组件以及兄弟组件，下面就不同组件之间的通信进行说明。
父组件通过props与子组件通信
定义父组件
import React, {Component} from 'react'; import { Text, StyleSheet, View, TouchableOpacity } from 'react-native'; import Child from "./Child"; export default class Parent extends Component { state = { son: 1 } render() { return <View> <View style={{borderColor: '#cc00ff', borderWidth: 2,}}> <Text style={{color: '#5599ff', fontSize: 20, padding: 10}}>父组件传值给子组件</Text> <Child parent={'父组件传值测试'} ref='alertSon' childToParent={(index) => { this.childDataToParent(index) }}/> </View> } }定义子组件
import React, {Component} from 'react'; import { Text, StyleSheet, View, TouchableOpacity, DeviceEventEmitter } from 'react-native'; export default class Child extends Component { render() { return <View style={{borderColor: 'red', borderWidth: 2, marginTop: 20}}> <Text style={{paddingTop: 10, fontSize: 16, color: 'red'}}>子组件1</Text> <Text style={{color: '#ccbbff', fontSize: 20, padding: 10}}>{`接收到父组件的传值：${this.props.parent}`}</Text> </View> } }结果如下：
从上面我们可以看出父组件通过给子组件添加属性的方式进行通信，子组件通过this.props.parent即可获取父组件传来的值，这也就是我们常用的一种方式，当然也可以使用ref进行通信，下面为大家介绍。
父组件通过ref方式与子组件通信
父组件定义如下：
我们在子组件中定义一个方法，来进行测试
点击后就可以调用子组件中的方法，结果如下：
因为ref是组件的特殊属性，组件被渲染后，指向组件的一个引用。可以通过组件的ref属性，来获取真实的组件，但并不是真正的DOM节点，而是存在于内存中的一种数据结构，只有当它真正的插入文档之后，才变为真正的DOM节点。react native节点的操作都是发生在虚拟DOM上，然后再将实际的部分反映到真实的DOM上--这就是 DOM DIff，可以提高页面性能。
子组件与父组件通信
这种通信也是props一种使用方式，首先我们在子组件定义属性，通过该属性调用父组件中的方法，从而实现子组件和父组件通信，父组件定义如下：
import React, {Component} from 'react'; import { Text, StyleSheet, View, TouchableOpacity } from 'react-native'; import Child from "./Child"; import Child2 from "./Child2"; export default class Parent extends Component { render() { return <View> <Text style={{color: '#5599ff', fontSize: 20, padding: 10}}>父组件传值给子组件</Text> <Child childToParent={(index) => { this.childDataToParent(index) }}/> </View> } childDataToParent(data) { alert(data) } }子组件定义如下：
