ReactNative学习笔记（七）——ref属性的用法和可点击组件

今天把CrazyCodeBoy老师的视频看完了，稍微总结一下：

一，ref属性

ref是组件的一种特殊属性，可以理解为，组件被渲染后，指向组件的一个引用。我们可以通过ref属性来获取真实的组件。

具体的用法就是：在一个文件中导入一个组件，可以通过组件的ref属性，来调用组件中定义的方法，用一个小例子来具体说明一下：

第一个文件：RefTestFather.js

import React,{Component} from 'react';
import {View,Text} from 'react-native';
import RefTest from './RefTest';export default class RefTestFather extends Component{constructor(props){super(props);this.state = {size:0}}render(){return(<View><RefTest ref='reftest'/>   //设置组件的ref属性<TextonPress={()=>{let size = this.refs.reftest.getSize();  //通过组件的ref属性来调用组件的方法this.setState({size:size});}}>size的大小为{this.state.size}</Text></View>);}
}

第二个文件，RefTest.js

import React,{Component} from 'react';
import {View,Text} from 'react-native';export default class RefTest extends Component{constructor(props){super(props);this.state = {size:0,}
}getSize(){               //定义一个getSize方法return this.state.size;}render(){return(<View><Text onPress={()=>{this.setState({size:this.state.size+10})}}>增加</Text><Text onPress={()=>{this.setState({size:this.state.size-10})}}>减小</Text></View>);}
}

这个例子是，在RefTest组件中，通过点击按钮调整size的大小，在RefTestFather中，通过RefTest组件的ref属性，得到组件本身，调用RefTest的getSize()方法，从而得到size的大小。

组件也可以通过：this.refs['reftest'] 这种写法来得到。

或者在组件标签中定义ref属性时，可以写成 ref={reftest=>this.reftest=reftest}; 之后通过this.reftest就可以得到组件了。

二，可点击组件（Touchable系列组件）

Touchable系列组件可以通过包裹视图，来响应用户的点击事件。如:

<TouchableWithoutFeedback onPress={()=>{//自定义事件}}>

<View style={{width:100,height:100}}/> //通过TouchableWithoutFeedback的包裹，该View就可以被点击了

</TouchableWithoutFeedback>

可点击的组件有下列4种：

1，TouchableWithoutFeedback：响应用户的点击事件，在处理点击事件的同时不显示任何视觉反馈。

2，TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。

3，TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

4，TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。

TouchableHighlight，TouchableOpacity，TouchableNativeFeedback三种组件都是在TouchableWithoutFeedback的基础上进行修改的。这里我主要说一下TouchableWithoutFeedback的一些属性。

1，onPress

onPress={()=>{//自定义点击事件}} 该方法在用户点击后调用

2，onLongPress

onLongPress={()=>{//自定义长按事件}} 该方法在用户长按组件后调用，如果没有定义该属性，用户长按组件后，会调用onPress方法。

3，disabled

disabled = ture 或者 false。该属性用来禁用组件的点击。设置为true后，组件不会响应点击事件。

4，onPressIn

onPressIn={()=>{//自定义事件}} 该方法在用户触摸到组件时调用

5，onPressOut

onPressOut={()=>{//自定义事件}} 该方法在用户的手指离开该组件时调用，无论是手指抬起离开屏幕，还是继续按着屏幕但是滑出该组件外，都会调用该方法

参考：

Touchable系列组件使用详解

ReactNative的ref使用详解

ReactNative学习笔记（七）——ref属性的用法和可点击组件相关推荐

ROS学习笔记七：使用rqt_console和roslaunch
ROS学习笔记七:使用rqt_console和roslaunch 本节主要介绍在调试时使用的rqt_console和rqt_logger_level,以及一次性打开多个节点的工具roslaunch. ...
window的dos命令学习笔记七
文章目录一.dos历史学习笔记(后期整合到这里,我想能学到这里的应该不多了,嘿嘿,加油) 二.执行状态返回值(`%errorlevel%`,和shell中`$?`相似): 三.视窗 1.color ...
OpenCV学习笔记(七)——图像梯度及边缘检测
图像梯度计算的是图像变化的速度.对于图像的边缘部分,其灰度值变化较大,梯度值也较大:相反,对于图像中比较平滑的部分,其灰度值变化较小,相应的梯度值也较小.一般情况下,图像梯度计算的是图像的边缘信息. ...
Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
吴恩达《机器学习》学习笔记七——逻辑回归（二分类）代码
吴恩达<机器学习>学习笔记七--逻辑回归(二分类)代码一.无正则项的逻辑回归 1.问题描述 2.导入模块 3.准备数据 4.假设函数 5.代价函数 6.梯度下降 7.拟合参数 8.用训练 ...
websocket 获取连接id_Swoole学习笔记七：搭建WebSocket长连接之使用 USER_ID 作为身份凭证...
Swoole学习笔记七:搭建WebSocket长连接之使用 USER_ID 作为身份凭证 2年前阅读 3678 评论 0 喜欢 0 ### 0.前言前面基本的WebSocket操作,我们基本都 ...
【K210】K210学习笔记七——使用K210拍摄照片并在MaixHub上进行训练
[K210]K210学习笔记七--使用K210拍摄照片并在MaixHub上进行训练前言 K210准备工作 K210如何拍摄照片准备工作拍摄相关代码定义用K210拍摄到的照片在MaixHub平台 ...
MongoDB学习笔记~对集合属性的操作
$unset清除元素请注意在单个数组元素上使用$unset的结果可能与你设想的不一样.其结果只是将元素的值设置为null,而非删除整个元素.要想彻底删除某个数组元素,可以用$pull 和$pop操作 ...
Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

ReactNative学习笔记（七）——ref属性的用法和可点击组件

ReactNative学习笔记（七）——ref属性的用法和可点击组件相关推荐

最新文章

热门文章