【React Native开发】

来源：互联网发布：九本女王升级数据2017 编辑：程序博客网时间：2024/05/21 10:45

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']获取。

1 0