《React-Native系列》30、 RN组件间通信

来源：互联网发布：ktv伴奏软件编辑：程序博客网时间：2024/04/28 04:09

今天我们来说一说RN的组件之间的通信。

ReactNative的核心之一是他的组件化，组件化的核心是组件之间的通信。

组件是有层级来区分的，譬如：父组件子组件。

我们先来讲解一个例子。

这个是我们要实现的功能，是一个表单的一部分，首先我们想到的是抽象组件。

组件有2种状态

选中状态，显示后面的课时
未选中状态，不显示后面的课时

组件的代码如下：

[javascript] view plain copy
 
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组件模块

[javascript] view plain copy
 
import CourseType from './CourseType';  

2、使用组件

[javascript] view plain copy
 
<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（）来调用。

0 0