react native 中View组件中的ref属性是什么

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react native 中View组件中的ref属性是什么相关的知识，希望对你有一定的参考价值。

在用Reactnative写工程时，默认奇妙的有一种像OC中，或者Java 中或者当前类的私有属性的想法，state 和props都不能满足时，就是ref  

它能达到其他语言中持有一个view组件，并且局部的刷新

ref 接受值为string类型的参数或者一个函数function

callback。这一特性让开发者对ref的使用更加灵活。
render() {
    return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount() {
    this._input.focus();
  },

    1
    2
    3
    4
    5
    6
    7

    1
    2
    3
    4
    5
    6
    7

render(){
    return <View ref={ (e) => this._view = e } />//将组件view作为参数赋值给了this._view
}
componentDidMount(){
    this._view.style = { backgroundColor:‘red‘,width:100,height:200 }
}

 

需要提醒大家的是，只有在组件的render方法被调用时，ref才会被调用，组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用，那么你得到的是undefined。 
心得：ref属性在开发中使用频率很高，使用它你可以获取到任何你想要获取的组件的对象，有个这个对象你就可以灵活地做很多事情，比如：读写对象的变量，甚至调用对象的函数。

让组件做到局部刷新setNativeProps 
有时候我们需要直接改动组件并触发局部的刷新，但不使用state或是props。 
setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ，则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。

‘use strict‘

import React, { Component } from ‘react‘;

import  {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput
} from ‘react-native‘;


import Dimensions from ‘Dimensions‘;
// 屏幕宽度
var screenWidth = Dimensions.get(‘window‘).width;
class RNRefDetail extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            textInputValue: ‘‘
        };
         this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //当按钮按下的时候执行此函数
        let textInputValue = ‘yuanmenglong‘;

        this.setState({textInputValue});

        //修改文本输入框的属性值
        this.refs.textInputRefer.setNativeProps({
            editable:false
        });

        this.refs.text2.setNativeProps({
            style:{
                color:‘blue‘,
                fontSize:30
            }
        });
        //使文本输入框变为不可编辑
    }

    render() {
        return (
            //ref={‘text2‘}>   //指定本组件的引用名
            <View style={styles.container}>
                <Text style={styles.buttonStyle} onPress={this.buttonPressed}>
                    按我
                </Text>
                <Text style={styles.textPromptStyle} ref="text2">
                    文字提示
                </Text>
                <View>
                    <TextInput style={styles.textInputStyle}
                               ref="textInputRefer"
                               value={this.state.textInputValue}
                               onChangeText={(textInputValue)=>this.setState({textInputValue})}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘
    },
    buttonStyle: { //文本组件样式,定义简单的按钮
        fontSize: 20,
        backgroundColor: ‘grey‘
    },
    textPromptStyle: { //文本组件样式
        fontSize: 20
    },
    textInputStyle: { //文本输入组件样式
        width: 150,
        height: 50,
        fontSize: 20,
        backgroundColor: ‘grey‘
    }
});

module.exports = RNRefDetail;
当点击按钮时，会刷新3个控件的值，但是只是单独去改变，而不是通过改变state状态机的机制来刷新界面，在重复需要多次刷新时使用，普通的时候直接通过state改变即可。 

这样用的缺点就是局部改变，回导致状态机混乱。

在用Reactnative写工程时，默认奇妙的有一种像OC中，或者Java 中或者当前类的私有属性的想法，state 和props都不能满足时，就是ref  

它能达到其他语言中持有一个view组件，并且局部的刷新

ref 接受值为string类型的参数或者一个函数function

callback。这一特性让开发者对ref的使用更加灵活。
render() {
    return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount() {
    this._input.focus();
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
render(){
    return <View ref={ (e) => this._view = e } />//将组件view作为参数赋值给了this._view
}
componentDidMount(){
    this._view.style = { backgroundColor:‘red‘,width:100,height:200 }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

需要提醒大家的是，只有在组件的render方法被调用时，ref才会被调用，组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用，那么你得到的是undefined。 
心得：ref属性在开发中使用频率很高，使用它你可以获取到任何你想要获取的组件的对象，有个这个对象你就可以灵活地做很多事情，比如：读写对象的变量，甚至调用对象的函数。

让组件做到局部刷新setNativeProps 
有时候我们需要直接改动组件并触发局部的刷新，但不使用state或是props。 
setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ，则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。

‘use strict‘
import React, { Component } from ‘react‘;

import  {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput
} from ‘react-native‘;


import Dimensions from ‘Dimensions‘;
// 屏幕宽度
var screenWidth = Dimensions.get(‘window‘).width;
class RNRefDetail extends Component {
    // 构造
constructor(props) {
        super(props);
        // 初始状态
this.state = {
            textInputValue: ‘‘
};
         this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //当按钮按下的时候执行此函数
let textInputValue = ‘yuanmenglong‘;

        this.setState({textInputValue});

        //修改文本输入框的属性值
this.refs.textInputRefer.setNativeProps({
            editable:false
});

        this.refs.text2.setNativeProps({
            style:{
                color:‘blue‘,
                fontSize:30
}
        });
        //使文本输入框变为不可编辑
}

    render() {
        return (
            //ref={‘text2‘}>   //指定本组件的引用名
<View style={styles.container}>
                <Text style={styles.buttonStyle} onPress={this.buttonPressed}>
                    按我
</Text>
                <Text style={styles.textPromptStyle} ref="text2">
                    文字提示
</Text>
                <View>
                    <TextInput style={styles.textInputStyle}
                               ref="textInputRefer"
value={this.state.textInputValue}
                               onChangeText={(textInputValue)=>this.setState({textInputValue})}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘
},
    buttonStyle: { //文本组件样式,定义简单的按钮
fontSize: 20,
        backgroundColor: ‘grey‘
},
    textPromptStyle: { //文本组件样式
fontSize: 20
},
    textInputStyle: { //文本输入组件样式
width: 150,
        height: 50,
        fontSize: 20,
        backgroundColor: ‘grey‘
}
});

module.exports = RNRefDetail;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

当点击按钮时，会刷新3个控件的值，但是只是单独去改变，而不是通过改变state状态机的机制来刷新界面，在重复需要多次刷新时使用，普通的时候直接通过state改变即可。 
这样用的缺点就是局部改变，回导致状态机混乱。

以上是关于react native 中View组件中的ref属性是什么的主要内容，如果未能解决你的问题，请参考以下文章

reactnative this.refs 怎么返回值

React Native学习-measure测量view的宽高值

react-native学习小结

如何在 React Native 中使用 React.forwardRef()

React Native - 使用 ref 的 TextInput 值（不受控制的组件）

React Native TextInput ref 始终未定义