【React Native开发】 - ref的使用

1.什么是ref

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

2.如何使用ref

举个栗子：

获取组件的设置图片size的大小

import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
} from 'react-native'
export default class RefText extends Component{
    constructor(props){
        super(props)
        this.state = ({
            size:35,
        })
    }
    getSize(){
        return this.state.size;
    }
    render(){
        return (
            <View>
                <Text style={styles.textStyle}
                    onPress={()=>{
                        if(this.state.size<360){
                            this.setState({
                            size:this.state.size+10
                            })
                        }
                    }}>增大图片</Text>
                <Text style={styles.textStyle}
                      onPress={()=>{
                        if(this.state.size>20){
                            this.setState({
                            size:this.state.size-10
                            })
                        }
                    }}>缩小图片</Text>
                <View style={{justifyContent:'center',alignItems:'center'}}>
                    <Image style={{width:this.state.size,height:this.state.size,}} source={require('./images/cat.png')}></Image>
                </View>
                
            </View>
        )
    }
}
var styles = StyleSheet.create({
    textStyle:{
        fontSize:20,
    },
})
Root 中通过ref属性获取图片size的大小
import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text
} from 'react-native'
import RefText from './refText'
export default class Root extends Component{
    constructor(props){
        super(props)
        this.state=({
            size:0
        })
    }
    render(){
        return (
            <View style={styles.flex}>
                <Text onPress={()=>{
                        var size = this.refs.refText.getSize();
                        //this.refs['refText']
                        this.setState({
                            size:size
                        })
                }} style={styles.textStyle}>点击获取图片size大小：{this.state.size}</Text>
                <RefText
                    ref="refText"
                />
            </View>
        )
    }
}
var styles = StyleSheet.create({
    container:{
        flex:1,
    },
    textStyle:{
        fontSize:22,
    },
})
  上图看看效果：

 

实现思路：首先为RefText组件定义ref属性，当RefText组件被调用时，组件会被渲染，渲染完成后，我们就可以通过

this.refs.refText获得RefText组件的实例，获得实例后通过this.refs.refText.getSize()获得其组件的方法或变量。

定义组件属性的除了通过ref="refText"外，我们还可以通过ref={refText=>this.refText=refText}设置组件的属性，获取

该组件就可以通过this.refText获得。同样，获取组件的方法可以通过this.refs['refText']获取。