《React-Native系列》30、 RN組件間通訊

今天我們來說一說RN的組件之間的通訊。

ReactNative的核心之一是他的組件化，組件化的核心是組件之間的通訊。

組件是有層級來區分的，譬如：父組件 子組件。

我們先來講解一個例子。

這個是我們要實現的功能，是一個表單的一部分，首先我們想到的是抽象組件。

組件有2種狀態

選中狀態，顯示後面的課時 未選中狀態，不顯示後面的課時

組件的代碼如下：

import React, { Component } from 'react';var {  StyleSheet,  View,  Text,  Image,  TextInput,  PixelRatio,  TouchableHighlight,  Dimensions,  TextInput,  TouchableWithoutFeedback,  TouchableOpacity,} = require('react-native')const {screenWidth, screenHeight} = Dimensions.get('window');const PxRatio = 2;export default class CourseType extends Component{    constructor(props) {      super(props);      this.state={        choosed : this.props.choosed,      }    }    modifyChoosed(choosed){      this.setState({choosed : choosed});    }  render() {    return (      <View style={styles.row}>        <TouchableOpacity style={styles.imageView} onPress={this.props.onPress} >          <Image source={this.state.choosed == 0 ?require('image!unselected') :require('image!red_selected') }   />        </TouchableOpacity>        <View style={styles.textInputTitle}>          <Text            style={styles.textTitle}>            {this.props.title}          </Text>        </View>        <Text style={{flex:1}}/>        {          this.state.choosed == 0 ? null :          <TextInput            style={styles.ksValueView}            maxLength={5}            placeholder="0"            placeholderTextColor="#b2b2b2"            multiline={false}            onChangeText={()=>{}}            keyboardType="numeric"            />        }        {          this.state.choosed == 0 ? null :            <View style={styles.ksTipView} >              <Text style={styles.ksTipText}>元/課時</Text>            </View>        }      </View>    );  }}const styles = StyleSheet.create({    row: {      backgroundColor: '#ffffff',      flexDirection: 'row',      height: 90 / PxRatio,      alignItems: 'center',      width:screenWidth,    },    imageView: {      marginLeft: 30/PxRatio,    },    textInputTitle: {      marginLeft:20/PxRatio,      alignItems:'center',    },    textTitle:{      fontSize: 28/PxRatio,      color:'#666666',    },    ksValueView:{      width:128/PxRatio,      height:52/PxRatio,      alignSelf:'center',      borderWidth: 1/PxRatio,      borderColor:'#dbdbdb',      textAlign:'center'    },    ksTipView:{      marginRight:30/PxRatio,      marginLeft:20/PxRatio,    },    ksTipText:{      fontSize: 28/PxRatio,      color:'#333333',    },  });

抽象出來的組件有一個狀態機器變數 choosed，來控制是否有被選中，他的值是由外部props傳入。

提供了一個onPress方法，控制選中狀態的切換。其中這個方法是由props傳遞過來的。

定義了modifyChoosed方法來修改狀態機器變數choosed

好，組件封裝完畢，那在表單頁面我們怎麼來使用這個組件呢。

1、import組件模組

import CourseType from './CourseType';

2、使用組件

<CourseType ref="stu" title="學生上門" choosed={this.state.type_stu} onPress={()=>{                  let choosed = this.state.type_stu == 0 ? 1:0;                  this.refs.stu.modifyChoosed(choosed);                  this.setState({type_stu:choosed})                }} />

這裡說明下

定義了CourseType組件的一個ref屬性，ref="stu" 定義了title屬性， 定義了choosed屬性，他的值是由表單的type_stu狀態機器變數控制 定義了onPress方法，他的實現是：先擷取choosed狀態（取反），通過this.refs.stu.調用CourseType組件的modifyChoosed方法修改choosed狀態，修改表單的type_stu狀態機器變數

好了，這樣我們就實現了功能。

那我們總結下，這個是重點。

表單相當於父組件，CourseType相當於子組件。

子組件可以通過this.props 調用父組件的方法。

那父組件如何調用子組件的方法呢。
首先在子組件上定義一個ref=xxx，然後在父組件內通過this.refs.xxx.子組件Method（）來調用。