Introduction to the ref attribute in the View component in react native

When writing projects with Reactnative, by default there is a wonderful idea like private properties in OC, or Java or the current class, when neither state nor props can satisfy it. , which is ref

It can hold a view component in other languages ​​and refresh it locally

ref accepts a parameter of type string or a function

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

It needs to be reminded that, only when When the component's render method is called, ref will be called and the component will return ref. If the render method has not been called when you call this.refs.xx, then you get undefined.
Experience: The ref attribute is used very frequently in development. You can use it to get the object of any component you want to get. With this object, you can do many things flexibly, such as: reading and writing objects. variables, and even call functions on objects.

Let the component refresh locally setNativeProps
Sometimes we need to directly change the component and trigger a partial refresh without using state or props.
setNativeProps method can be understood as directly modifying dom on the web. Use this method to modify View, Text and other components that come with RN , the component's componentWillReceiveProps and shouldComponentUpdate will not be triggered. , componentWillUpdate and other methods in the component life cycle.

'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={&#39;text2&#39;}>   //指定本组件的引用名<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: &#39;center&#39;,
        alignItems: &#39;center&#39;},
    buttonStyle: { //文本组件样式,定义简单的按钮fontSize: 20,
        backgroundColor: &#39;grey&#39;},
    textPromptStyle: { //文本组件样式fontSize: 20},
    textInputStyle: { //文本输入组件样式width: 150,
        height: 50,
        fontSize: 20,
        backgroundColor: &#39;grey&#39;}
});

module.exports = RNRefDetail;

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

When writing projects with Reactnative, by default there is a wonderful idea like private properties in OC, or Java, or the current class. Neither state nor props can When satisfied, it is ref

It can hold a view component in other languages ​​and refresh it locally

ref accepts a value of string Type parameters or a function function

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

It should be reminded that ref will be called and the component will return ref only when the render method of the component is called. If the render method has not been called when you call this.refs.xx, then you get undefined.
Experience: The ref attribute is used very frequently in development. You can use it to get the object of any component you want to get. With this object, you can do many things flexibly, such as: reading and writing objects. variables, and even call functions on objects.

Let the component refresh locally setNativeProps
Sometimes we need to directly change the component and trigger a partial refresh without using state or props.
setNativeProps method can be understood as directly modifying dom on the web. Use this method to modify View, Text and other components that come with RN , the component's componentWillReceiveProps and shouldComponentUpdate will not be triggered. , componentWillUpdate and other methods in the component life cycle.

'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={&#39;text2&#39;}>   //指定本组件的引用名<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: &#39;center&#39;,alignItems: &#39;center&#39;},buttonStyle: { //文本组件样式,定义简单的按钮fontSize: 20,backgroundColor: &#39;grey&#39;},textPromptStyle: { //文本组件样式fontSize: 20},textInputStyle: { //文本输入组件样式width: 150,height: 50,fontSize: 20,backgroundColor: &#39;grey&#39;}
});module.exports = RNRefDetail;

When the button is clicked, the values ​​​​of the three controls will be refreshed, but only changed individually, rather than refreshing the interface by changing the mechanism of the state state machine. It is used when repeated refreshes are needed multiple times. Ordinary It can be changed directly through state.
The disadvantage of using it this way is that local changes will cause state machine confusion.

The above is the detailed content of Introduction to the ref attribute in the View component in react native. For more information, please follow other related articles on the PHP Chinese website!