React Native の View コンポーネントの ref 属性の概要

Reactnative でプロジェクトを書くとき、デフォルトでは OC のプライベートプロパティ、または Java または現在のクラスのどちらも満たされていない場合、それは ref

です。他の言語でビューコンポーネントを保持し、ローカルで更新することが可能です

ref は文字列型または関数 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 }
}

コンポーネントの render メソッドが呼び出され、ref が呼び出され、コンポーネントは ref を返します。 this.refs.xx を呼び出したときに render メソッドが呼び出されていなかった場合、unknown が返されます。
経験: ref 属性は開発で非常に頻繁に使用され、このオブジェクトを使用すると、オブジェクトの変数の読み取りと書き込みなど、さまざまな操作を柔軟に行うことができます。オブジェクトの関数を呼び出すこともできます。

コンポーネントをローカルで更新する setNativeProps
場合によっては、状態や props を使用せずにコンポーネントを直接変更し、部分的な更新をトリガーする必要があります。
setNativeProps メソッドは、Web 上の DOM を直接変更するものとして理解できます。このメソッドを使用して、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={&#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改变即可。 
这样用的缺点就是局部改变，回导致状态机混乱。

Reactnative でプロジェクトを書くとき、デフォルトでは OC や Java のプライベート プロパティ、または現在のクラスのような素晴らしいアイデアがあり、state も props も満たされていない場合、それは ref

です。他の言語でビューコンポーネントを保持し、ローカルで更新することが可能です

refは文字列型または関数関数のパラメータを受け入れます

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

コンポーネントのrenderメソッドが呼び出された場合のみであることを皆さんに思い出していただく必要があります、 ref が呼び出され、コンポーネントは ref を返します。 this.refs.xx を呼び出したときに render メソッドが呼び出されていなかった場合、unknown が返されます。
経験: ref 属性は開発で非常に頻繁に使用され、このオブジェクトを使用すると、オブジェクトの変数の読み取りと書き込みなど、さまざまな操作を柔軟に行うことができます。オブジェクトの関数を呼び出すこともできます。

コンポーネントをローカルで更新する setNativeProps
場合によっては、状態や props を使用せずにコンポーネントを直接変更し、部分的な更新をトリガーする必要があります。
setNativeProps メソッドは、Web 上の DOM を直接変更するものとして理解できます。このメソッドを使用して、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={&#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 つのコントロールの値が更新されますが、ステート ステート マシンのメカニズムを変更してインターフェイスを更新するのではなく、個別に変更されるだけです。更新を繰り返す場合に使用されます。通常はステートを直接通過するので変更するだけです。
この方法で使用する場合の欠点は、ローカルな変更によりステート マシンの混乱が生じることです。

以上がReact Native の View コンポーネントの ref 属性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。