ReactNative学习笔记（七）——ref属性的用法和可点击组件

        今天把CrazyCodeBoy老师的视频看完了，稍微总结一下：

一，ref属性

      ref是组件的一种特殊属性，可以理解为，组件被渲染后，指向组件的一个引用。我们可以通过ref属性来获取真实的组件。

    具体的用法就是：在一个文件中导入一个组件，可以通过组件的ref属性，来调用组件中定义的方法，用一个小例子来具体说明一下：

    第一个文件：RefTestFather.js

import React,{Component} from 'react';
import {View,Text} from 'react-native';
import RefTest from './RefTest';

export default class RefTestFather extends Component{

  constructor(props){
    super(props);
    this.state = {size:0}
  }

  render(){
    return(
      <View>
      <RefTest ref='reftest'/>   //设置组件的ref属性

        <Text
          onPress={()=>{
          let size = this.refs.reftest.getSize();  //通过组件的ref属性来调用组件的方法
          this.setState({size:size});
        }
      }>size的大小为{this.state.size}
        </Text>
      </View>
    );
  }
}

第二个文件，RefTest.js

import React,{Component} from 'react';
import {View,Text} from 'react-native';


export default class RefTest extends Component{

constructor(props){
  super(props);
  this.state = {
    size:0,
  }
}
  getSize(){               //定义一个getSize方法
    return this.state.size;
  }
  
  render(){
    return(
      <View>
        <Text onPress={()=>{this.setState({size:this.state.size+10})}}>增加</Text>
        <Text onPress={()=>{this.setState({size:this.state.size-10})}}>减小</Text>
      </View>
    );
  }
}

    这个例子是，在RefTest组件中，通过点击按钮调整size的大小，在RefTestFather中，通过RefTest组件的ref属性，得到组件本身，调用RefTest的getSize()方法，从而得到size的大小。

    组件也可以通过：this.refs['reftest']  这种写法来得到。

    或者在组件标签中定义ref属性时，可以写成 ref={reftest=>this.reftest=reftest};  之后通过this.reftest就可以得到组件了。

二，可点击组件（Touchable系列组件）

        Touchable系列组件可以通过包裹视图，来响应用户的点击事件。如:

<TouchableWithoutFeedback  onPress={()=>{//自定义事件}}>

<View style={{width:100,height:100}}/>      //通过TouchableWithoutFeedback的包裹，该View就可以被点击了

</TouchableWithoutFeedback>

可点击的组件有下列4种：

 1，TouchableWithoutFeedback：响应用户的点击事件，在处理点击事件的同时不显示任何视觉反馈。

 2，TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。

3，TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

4，TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。

    TouchableHighlight，TouchableOpacity，TouchableNativeFeedback三种组件都是在TouchableWithoutFeedback的基础上进行修改的。这里我主要说一下TouchableWithoutFeedback的一些属性。

   1，onPress  

        onPress={()=>{//自定义点击事件}}   该方法在用户点击后调用

2，onLongPress

        onLongPress={()=>{//自定义长按事件}}   该方法在用户长按组件后调用，如果没有定义该属性，用户长按组件后，会调用onPress方法。

3，disabled

  disabled = ture 或者 false。该属性用来禁用组件的点击。设置为true后，组件不会响应点击事件。

 4，onPressIn  

        onPressIn={()=>{//自定义事件}}   该方法在用户触摸到组件时调用

5，onPressOut

        onPressOut={()=>{//自定义事件}}   该方法在用户的手指离开该组件时调用，无论是手指抬起离开屏幕，还是继续按着屏幕但是滑出该组件外，都会调用该方法

参考：

        Touchable系列组件使用详解

        ReactNative的ref使用详解