React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件

也绑定点击事件,React Native提供了3个组件来做这件事。

1.TouchableHighlight:高亮触摸,用户点击时,会产生高亮效果。

2.TouchableOpacity:透明触摸。用户点击时,点击的组件会出现透明效果。

3.TouchableWithoutFeedback:无反馈性触摸。用户点击时无任何视觉效果。

注意:只支持一个子节点,如果你希望包含多个子组件,用一个View来包装它们。

一:TouchableHighlight

1:当手指点击按下的时候,该视图的不透明度会进行降低同时会看到相应的颜色,其实现原理则是在底层新添加了一个View。此外,TouchableHighlight只能进行一层嵌套,不能多层嵌套。

常用属性:

1.1:activeOpacity  number

设置组件在进行触摸的时候,显示的不透明度(取值在0-1之间)

1.2:onHideUnderlay  function  方法

当底层被隐藏的时候调用

1.3:onShowUnderlay  function 方法

当底层显示的时候调用

1.4:style

可以设置控件的风格演示,该风格演示可以参考View组件的style

1.5:underlayColor

当触摸或者点击控件的时候显示出的颜色

2:实例代码

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Alert,
Image,
TouchableHighlight
} from 'react-native'; class ReactNativeProject extends Component {
_show(text) {
alert(text);
} render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this._show.bind(this,'React Native')}
underlayColor='#E1F6FF'>
<Text style={styles.item}>React Native</Text>
</TouchableHighlight> <TouchableHighlight
onPress={this._show.bind(this,'点击效果')}
underlayColor='#E1F6FF'>
<Text style={styles.item}>点击效果</Text>
</TouchableHighlight>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:64
},
item:
{
fontSize:18,
marginLeft:5,
color:'#434343'
}
}); AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

效果图:

二:不透明触摸 TouchableOpacity

1:该组件封装了响应触摸事件;当点击按下的时候,该组件的透明度会降低。该组件不用设置背景色,这样使用起来更方便;

常用属性:

activeOpacity  number

设置当用户触摸的时候,组件的透明度

2:实例代码

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Alert,
Image,
TouchableHighlight,
TouchableOpacity
} from 'react-native'; class ReactNativeProject extends Component {
_show(text) {
alert(text);
} render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={this._show.bind(this,'React Native')}
activeOpacity={0.5}>
<Text style={styles.item}>React Native</Text>
</TouchableOpacity> <TouchableOpacity
onPress={this._show.bind(this,'点击效果')}
activeOpacity={0.9}>
<Text style={styles.item}>点击效果</Text>
</TouchableOpacity>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:64
},
item:
{
fontSize:18,
marginLeft:5,
color:'#434343'
}
}); AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

效果图:

三:TouchableWithoutFeedback 

除非你有一个很好的理由,否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈(然而本组件没有任何视觉反馈)。这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一。TouchableWithoutFeedback只支持一个子节点,如果你希望包含多个子组件,用一个View来包装它们。

四:知识点

1:react native 代参bind this 的两种方式(如果不用bind,事件会在加载时马上就执行了)

第一种带参数 bind this的方式(使用箭头方法)

<TouchableOpacity
onPress={(e) => this._needHandlderArgument(e,argument)}
underlayColor='#00EE76'>
</TouchableOpacity >
_needHandlderArgument(e, argument) {
// 只处理argument e用于绑定this
}

第二种带参数 bind this的方式(直接带参bind)

    <TouchableOpacity
onPress={this._needHandlderArgument.bind(this,argument)}
underlayColor='#00EE76'>
</TouchableOpacity >
 _needHandlderArgument(argument) {
// 只处理argument
}

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

React Native知识5-Touchable类组件的更多相关文章

  1. React Native知识

    http://www.cnblogs.com/wujy/tag/React%20Native/    React Native知识12-与原生交互 React Native知识11-Props(属性) ...

  2. Touchable类组件

    Touchable /* * React Native中提供3个组件用于给其他没有触摸事件的组件,绑定触摸事件 * TouchableOpacity 透明触摸,点击时,组件会出现透明过渡的效果 * T ...

  3. React Native之本地文件系统访问组件react-native-fs的介绍与使用

    React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...

  4. [RN] React Native 使用 React-native-scrollable-tab-view 实现 类头条 新闻页头部 效果

    React Native 使用 React-native-scrollable-tab-view 实现 类头条 新闻页效果 效果如下: 一.安装依赖 npm install react-native- ...

  5. React Native知识6-NavigatorIOS组件

    NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...

  6. React Native知识2-Text组件

    Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...

  7. React Native知识12-与原生交互

    一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...

  8. React Native知识1-FlexBox 布局内容

    一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其 ...

  9. React Native 系列(九) -- Tab标签组件

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

随机推荐

  1. lintcode 落单的数(位操作)

    题目1 落单的数 给出2*n + 1 个的数字,除其中一个数字之外其他每个数字均出现两次,找到这个数字. 链接:http://www.lintcode.com/zh-cn/problem/single ...

  2. lintcode 滑动窗口的最大值(双端队列)

    题目链接:http://www.lintcode.com/zh-cn/problem/sliding-window-maximum/# 滑动窗口的最大值 给出一个可能包含重复的整数数组,和一个大小为  ...

  3. 效率和协作工具--OneNote

    身边有很多的朋友,都是在电脑上办公.除了会计和外贸相关的工作,用到Excel,公司的ERP比较多.日常工作中,特别是事情一多,大家基本不知道从何处完成今天的任务,而已有时经常丢三落四.同事在QQ或者M ...

  4. Delegate、Predicate、Action和Func

    写在前面 Delegate Predicate Action Func 逆变和协变 先说下什么是委托(Delegate),委托在C#中是一种类型,和Class是一个级别,但是我们经常把它看做是一个方法 ...

  5. ios使用jspatch中需要注意的事项

    第一份代码,为了纠正原代码不显示29号的bug,先上代码 require('NSString','MCDatePickType','NSMutableArray','UIButton'); defin ...

  6. HTML基本元素(二)

    1.图像 <img src="URL" alt="" /> 说明 src 定义图像的url alt 定义图像的替代文本 width 设置图像的宽度 ...

  7. SQL Server基础之游标

    查询语句可能返回多条记录,如果数据量非常大,需要使用游标来逐条读取查询结果集中的记录.应用程序可以根据需要滚动或浏览其中的数据.本篇介绍游标的概念.分类.以及基本操作等内容. 一:认识游标   游标是 ...

  8. [开源ORM] SqliteSugar 3.x .net Core版本成功上线

    SqliteSqlSugar 3.X API 作为支持.NET CORE 为数不多的ORM之一,除了具有优越的性能外,还拥有强大的功能,不只是满足你的增,删,查和改.实质上拥有更多你想像不到的功能,当 ...

  9. asp.net <asp:Content>控件

    <asp:Content ID="Content2" ContentPlaceHolderID="CPH_MainContent" runat=" ...

  10. Visual Studio中安装viemu后,vim vax 快捷键大全

    高效率移动 在插入模式之外 基本上来说,你应该尽可能少的呆在插入模式里面,因为在插入模式里面VIM就像一个“哑巴”编辑器一样.很多新手都会一直呆在插入模式里面,因为这样易于使用.但VIM的强大之处在于 ...