从零学React Native之09可触摸组件
可触摸组件有:
TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback
1. TouchableWithoutFeedback,在用户触摸的时候没有反馈任何触摸效果,体验很不好,基本很少使用.
2. TouchableNativeFeedback 是Android操作系统专用组件,使用原生控件相应的状态来展示, 比如5.0以上产生涟漪效果.
3. TouchableHighlight与TouchableOpacity都产生视觉效果, 其中TouchableOpacity是四者中使用最多的.
TouchableHighlight
当一个组件成为TouchableHighlight组件的子组件后,这个组件触摸时会产生一种变暗的效果,原理就是让被子组件遮盖住的下一层颜色向上透出来,这样就使子组件变暗或颜色, 默认透传上来是黑色, 可以通过underlayColor指定透传的颜色。activeOpacity属性可以指定透明度. 默认是0.8。
TouchableHighlight 还有一个bug,来看下面的代码:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
TouchableHighlight,
TouchableOpacity,
TouchableNativeFeedback
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
//根View
<View style={{flex:1,backgroundColor:'white'}}>
<TouchableHighlightonPress={this.buttonPressed}>
<View style={{width:120,height:70,backgroundColor:'grey'}}/>
</TouchableHighlight>
</View>
);
}
buttonPressed(){
console.log("press");
}
}
按下前效果:
按下的效果:
可以看到右侧不应该变暗的地方也变暗了, 这个可以在右侧增加一些其他需要显示的组件,或者为整个背景加个图片就可以解决。 当然还是建议大家使用TouchableOpacity。
TouchableOpacity
当一个组件成为TouchableOpacity组件的子组件后, 这个组件被触摸时会变成半透明的组件,通过activeOpacity 控制透明度, 默认是0.2 。
修改上面的代码:
...
render() {
return (
//根View
<View style={{flex:1,backgroundColor:'white'}}>
<TouchableOpacity onPress={this.buttonPressed}>
<View style={{width:120,height:70,backgroundColor:'grey'}}/>
</TouchableOpacity>
</View>
);
}
...
TouchableOpacity按下效果:
回调函数和其它属性
- onPress 点击事件回调函数
- onLongPress 长按事件
- delayLongPress 设置长按事件的时长是多少毫米 默认是500ms
- delayPressOut 设置离开屏幕多少毫秒后 onPressOut事件被激活, 默认是0
- delayPressIn 设置手指触摸屏幕多少毫米厚, onPressIn事件被激活,默认是0
从零学React Native之09可触摸组件的更多相关文章
- 从零学React Native之13 持久化存储
数据持久化就是指应用程序将某些数据存储在手机存储空间中. 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 ...
- 从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本 ...
- 从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...
- 从零学React Native之02状态机
本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭 ...
- 从零学React Native之04自定义对话框
本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进 ...
- 从零学React Native之14 网络请求
通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式. node-fetch是RN推荐的请求方式. React Native框架在初始化项目时, 引入了node-fetch包 ...
- 从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...
- 从零学React Native之10Text
在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中.虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么 ...
- 从零学React Native之08Image组件
开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...
随机推荐
- Leetcode138. Copy List with Random Pointer复制带随机指针的链表
给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深度拷贝. 方法一: class Solution { public: RandomLis ...
- 【vue移动端架子】vue-h5-template
作者大大的地址:https://github.com/sunnie1992/vue-h5-template 我们运行项目,倒是可以看一看效果 虽然就是显示的UI,但是应该可以知道作者大大想要什么东西了 ...
- 二进制日志过期时间设置expire_logs_days
# expire_logs_days参数只支持整数,且范围是[0,99] show variables like 'expire_logs_days';set global expire_logs_d ...
- Vijos 学姐的逛街计划
传送门 题解传送门 线性规划,最小费用最大流. 神奇的操作. //Achen #include<algorithm> #include<iostream> #include&l ...
- ECMAScript 6 (浅显入门)
1.let:ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为unde ...
- case expressions must be constant expressions
As the error message states, the case expressions must be constant. The compiler builds this as a ve ...
- liunx定时删除文件(产生的日志.........)
linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...
- gin入门-1
Gin框架介绍 1. 简介Gin框架介绍A. 基于httprouter开发的web框架.http://github.com/julienschmidt/httprouterB. 提供Martini风格 ...
- maven编译报错 错误: -source 1.5 中不支持 lambda 表达式
ji与基于maven的工程java应用程序非web应用的 参考这个https://www.cnblogs.com/softidea/p/6256543.html 但是java应用里边是没有这个配置的, ...
- netbeans调试webapp 只能用localhost访问
etbeans 我的电脑是192.168.0.2,用这个地址访问 网上有人说,分两种情况 此问题分两种情况: 1. 可以用127.0.0.1访问 2. 不能用127.0.0.1访问 针对第一种情况,我 ...