Introduction to the ref attribute in the View component in react native-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

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

零下一度

Jun 27, 2017 am 09:20 AM

ie native react view components

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 }
}

Copy after login

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.

&#39;use strict&#39;import React, { Component } from &#39;react&#39;;

import  {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput
} from &#39;react-native&#39;;


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

    buttonPressed() { //当按钮按下的时候执行此函数let textInputValue = &#39;yuanmenglong&#39;;this.setState({textInputValue});//修改文本输入框的属性值this.refs.textInputRefer.setNativeProps({
            editable:false});this.refs.text2.setNativeProps({
            style:{
                color:&#39;blue&#39;,
                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;

Copy after login

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

Copy after login

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();
  },

Copy after login

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.

&#39;use strict&#39;import React, { Component } from &#39;react&#39;;import  {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput
} from &#39;react-native&#39;;import Dimensions from &#39;Dimensions&#39;;// 屏幕宽度var screenWidth = Dimensions.get(&#39;window&#39;).width;class RNRefDetail extends Component {// 构造constructor(props) {super(props);// 初始状态this.state = {
            textInputValue: &#39;&#39;};         this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //当按钮按下的时候执行此函数let textInputValue = &#39;yuanmenglong&#39;;this.setState({textInputValue});//修改文本输入框的属性值this.refs.textInputRefer.setNativeProps({
            editable:false});this.refs.text2.setNativeProps({
            style:{
                color:&#39;blue&#39;,
                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;

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7843

Java Tutorial

1649

CakePHP Tutorial

1403

Laravel Tutorial

1300

PHP Tutorial

1240

Related knowledge

How to install the Windows 10 old version component DirectPlay Dec 28, 2023 pm 03:43 PM

Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box

PHP, Vue and React: How to choose the most suitable front-end framework? Mar 15, 2024 pm 05:48 PM

PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.

Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

How to open the settings of the old version of win10 components Dec 22, 2023 am 08:45 AM

Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open

Integration of Java framework and front-end React framework Jun 01, 2024 pm 03:16 PM

Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.

What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) Feb 10, 2024 am 10:30 AM

More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu

How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page Mar 20, 2024 pm 09:21 PM

Recently, many win10 users have found that their IE browser always automatically jumps to the edge browser when using computer browsers. So how to turn off the automatic jump to edge when opening IE in win10? Let this site carefully introduce to users how to automatically jump to edge and close when opening IE in win10. 1. We log in to the edge browser, click... in the upper right corner, and look for the drop-down settings option. 2. After we enter the settings, click Default Browser in the left column. 3. Finally, in the compatibility, we check the box to not allow the website to be reloaded in IE mode and restart the IE browser.

How to solve the problem that IE shortcut cannot be deleted Jan 29, 2024 pm 04:48 PM

Solutions to IE shortcuts that cannot be deleted: 1. Permission issues; 2. Shortcut damage; 3. Software conflicts; 4. Registry issues; 5. Malicious software; 6. System issues; 7. Reinstall IE; 8. Use third-party tools; 9. Check the target path of the shortcut; 10. Consider other factors; 11. Consult professionals. Detailed introduction: 1. Permission issue, right-click the shortcut, select "Properties", in the "Security" tab, make sure you have sufficient permissions to delete the shortcut. If not, you can try running as an administrator, etc.

See all articles