可触摸组件有:

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按下效果:

回调函数和其它属性

  1. onPress 点击事件回调函数
  2. onLongPress 长按事件
  3. delayLongPress 设置长按事件的时长是多少毫米 默认是500ms
  4. delayPressOut 设置离开屏幕多少毫秒后 onPressOut事件被激活, 默认是0
  5. delayPressIn 设置手指触摸屏幕多少毫米厚, onPressIn事件被激活,默认是0

从零学React Native之09可触摸组件的更多相关文章

  1. 从零学React Native之13 持久化存储

    数据持久化就是指应用程序将某些数据存储在手机存储空间中. 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 ...

  2. 从零学React Native之11 TextInput

    TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本 ...

  3. 从零学React Native之03页面导航

    之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...

  4. 从零学React Native之02状态机

    本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭 ...

  5. 从零学React Native之04自定义对话框

    本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进 ...

  6. 从零学React Native之14 网络请求

    通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式. node-fetch是RN推荐的请求方式. React Native框架在初始化项目时, 引入了node-fetch包 ...

  7. 从零学React Native之12 组件的生命周期

    一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...

  8. 从零学React Native之10Text

    在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中.虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么 ...

  9. 从零学React Native之08Image组件

    开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...

随机推荐

  1. Leetcode138. Copy List with Random Pointer复制带随机指针的链表

    给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深度拷贝. 方法一: class Solution { public: RandomLis ...

  2. 【vue移动端架子】vue-h5-template

    作者大大的地址:https://github.com/sunnie1992/vue-h5-template 我们运行项目,倒是可以看一看效果 虽然就是显示的UI,但是应该可以知道作者大大想要什么东西了 ...

  3. 二进制日志过期时间设置expire_logs_days

    # expire_logs_days参数只支持整数,且范围是[0,99] show variables like 'expire_logs_days';set global expire_logs_d ...

  4. Vijos 学姐的逛街计划

    传送门 题解传送门 线性规划,最小费用最大流. 神奇的操作. //Achen #include<algorithm> #include<iostream> #include&l ...

  5. ECMAScript 6 (浅显入门)

    1.let:ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为unde ...

  6. case expressions must be constant expressions

    As the error message states, the case expressions must be constant. The compiler builds this as a ve ...

  7. liunx定时删除文件(产生的日志.........)

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...

  8. gin入门-1

    Gin框架介绍 1. 简介Gin框架介绍A. 基于httprouter开发的web框架.http://github.com/julienschmidt/httprouterB. 提供Martini风格 ...

  9. maven编译报错 错误: -source 1.5 中不支持 lambda 表达式

    ji与基于maven的工程java应用程序非web应用的 参考这个https://www.cnblogs.com/softidea/p/6256543.html 但是java应用里边是没有这个配置的, ...

  10. netbeans调试webapp 只能用localhost访问

    etbeans 我的电脑是192.168.0.2,用这个地址访问 网上有人说,分两种情况 此问题分两种情况: 1. 可以用127.0.0.1访问 2. 不能用127.0.0.1访问 针对第一种情况,我 ...