《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（）来调用。