在用Reactnative寫工程時,預設奇妙的有一種像OC中,或者Java 中或目前類別的私有屬性的想法,state 和props都不能滿足時,就是ref
它能達到其他語言中持有一個view元件,局部的刷新
## ref 接受值為string類型的參數或一個函數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:'red',width:100,height:200 } }需要提醒大家的是,只有在當元件的render方法被調用時,ref才會被調用,元件才會返回ref。如果你在調用this.refs.xx時render方法還沒被調用,那麼你得到的是undefined。
心得:ref屬性在開發中使用頻率很高,使用它你可以獲取到任何你想要獲取的組件的對象,有個這個對像你就可以靈活地做很多事情,比如:讀寫對象的變量,甚至呼叫物件的函數。
有時候我們需要直接改變元件並觸發局部的刷新,但不使用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'}> //指定本组件的引用名5780215a64032962b7061d5f82a1958c 25f43358c5a6e74031934a91e31e84a1按我b735fb8965edb39ac28662131d16c063 1d97fb11eff5dfbac89eba87cb3013cc文字提示b735fb8965edb39ac28662131d16c063 548e7793df275d156d270cdda504ba19 5651aee6944549a902b4a111880e0f8ethis.setState({textInputValue})}/> 3d260b73c372472a96940693fb62cbcc 3d260b73c372472a96940693fb62cbcc ); } } 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(); },要提醒大家的是,只有在元件的render方法被呼叫時,ref才會被調用,元件才會返回ref。如果你在調用this.refs.xx時render方法還沒被調用,那麼你得到的是undefined。
心得:ref屬性在開發中使用頻率很高,使用它你可以獲取到任何你想要獲取的組件的對象,有個這個對像你就可以靈活地做很多事情,比如:讀寫對象的變量,甚至呼叫物件的函數。
有時候我們需要直接改變元件並觸發局部的刷新,但不使用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'}> //指定本组件的引用名5780215a64032962b7061d5f82a1958c 25f43358c5a6e74031934a91e31e84a1按我b735fb8965edb39ac28662131d16c063 1d97fb11eff5dfbac89eba87cb3013cc文字提示b735fb8965edb39ac28662131d16c063 548e7793df275d156d270cdda504ba19 db290f55403e75d392c59ca39c8394cbthis.setState({textInputValue})} /> 3d260b73c372472a96940693fb62cbcc 3d260b73c372472a96940693fb62cbcc ); } }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改變即可。
這樣用的缺點就是局部改變,回導致狀態機混亂。
以上是react native 中View元件中的ref屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!