【React Native开发】React Native控件之Touchable*系列组件详解(18)

转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50630984

本文出自:【江清清的博客】

(一)前言

【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org

今天我们一起来看一下Touchable*系列组件的使用详解，该系列组件包括四种分别为:TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback。其中最后一个控件是触摸点击不带反馈效果的，另外三个都是有反馈效果。可以这样理解前面三个都是继承自TouchableWithoutFeedback扩展而来。

刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

今天我们需要讲解的这四种控件都是属于Touchable系列的，是封装了触摸点击相关事件,例如:触摸,点击,长按,反馈等相关。下面我们来把这四种组件分别进行讲解一下。

(二)TouchableWithoutFeedback

2.1.TouchableWithoutFeedback组件基本介绍

该控件除非你不得不使用，否则请不要使用该组件哦~任何可以响应事件的控件当触摸或者点击的时候应该会有视觉上面的反应效果(但是该组件没有)。这就是一个很大的原因，看起来像Web效果而不是原生的效果(Native)。

【特别声明】TouchableWithFeedback只支持一个字节点，如果你需要设置多个子视图组件，那么就需要使用View节点进行包装。

2.2.属性方法

  • accessibilityComponentType   View.AccessibilityComponentType  设置可访问的组件类型
  • accessibilityTraits View.AccessibilityTraits,[View.AccessibilityTraits] 设置访问特征
  • accessible  bool  设置当前组件是否可以访问
  • delayLongPress  number  设置延迟的时间，单位为毫秒。从onPressIn方法开始，到onLongPress被调用这一段时间
  • delayPressIn  number 设置延迟的时间，单位为毫秒，从用户触摸控件开始到onPressIn被调用这一段时间
  • delayPressOut  number 设置延迟的时间，单位为毫秒，从用户触摸事件释放开始到onPressOut被调用这一段时间
  • onLayout  function  当组件加载或者改组件的布局发生变化的时候调用。调用传入的参数为{nativeEvent:{layout:{x,y,width,height}}}
  • onLongPress function 方法，当用户长时间按压组件(长按效果)的时候调用该方法
  • onPress function 方法 当用户点击的时候调用(触摸结束)。 但是如果事件被取消了就不会调用。(例如:当前被滑动事件所替代)
  • onPressIn  function  用户开始触摸组件回调方法
  • onPressOut function 用户完成触摸组件之后回调方法
  • pressRetentionOffset {top:number,left:number,bottom:number,right:number}   该设置当视图滚动禁用的情况下，可以定义当手指距离组件的距离。当大于该距离该组价会失去响应。当少于该距离的时候，该组件会重新进行响应。

该组件我们一般不会直接进行使用，下面三种Touchable*系列组件对于该组件的属性方法都可以进行使用。具体会具体演示这些属性方法的使用实例。

(三)TouchableHighlight(触摸点击高亮效果)

3.1.TouchableHighlight组件基本介绍

该组件进行封装视图触摸点击的属性。当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色(视图变暗或者变亮)。如果我们去查看该组件的源代码会发现，该底层实现是添加了一个新的视图。如果如果我们没有正确的使用，就可能不会出现正确的效果。例如:我们没有给该组件视图设置backgroudnColor的颜色值。

【特别声明】TouchableHighlight只支持一个字节点，如果你需要设置多个子视图组件，那么就需要使用View节点进行包装。

3.2.属性方法

  • TouchableWithoutFeedback的 属性，这边TouchableHighlight组件全部可以进行使用
  • activeOpacity  number 该用来设置视图在进行触摸的时候，要要显示的不透明度(通常在0-1之间)
  • onHideUnderlay  function  方法 当底层被隐藏的时候调用
  • onShowUnderlay  function 方法 当底层显示的时候调用
  • style  可以设置控件的风格演示，该风格演示可以参考View组件的style
  • underlayColor  当触摸或者点击控件的时候显示出的颜色

3.3.组件使用实例代码

‘use strict‘;
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} from‘react-native‘;

class TouchableHighlightDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text >
          TouchableHighlight实例
        </Text>
        <TouchableHighlight
          underlayColor="rgb(210, 230,255)"
          activeOpacity={0.5}
          style={{ borderRadius: 8,padding:6,marginTop:5}}
          >
             <Text style={{fontSize:16}}>点击我</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
const styles =StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
});
AppRegistry.registerComponent(‘TouchableHighlightDemo‘,() => TouchableHighlightDemo);

3.4.运行效果如下:

(四)TouchableOpacity(透明度变化)

4.1.TouchableOpacity组件介绍

该组件封装了响应触摸事件。当点击按下的时候，该组件的透明度会降低。该组件使用过程中并不会改变视图的层级关系，而且我们可以非常容易的添加到应用并且不会产生额外的异常错误。

4.2.属性方法

  • TouchableWithoutFeedback的 属性，这边TouchableHighlight组件全部可以进行使用
  • activeOpacity  number  设置当用户触摸的时候，组件的透明度

4.3.组件使用实例代码:

‘use strict‘;
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from‘react-native‘;

class TouchableDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
           TouchableOpacity实例
        </Text>
        <TouchableOpacity style={{marginTop:20}}>
           <Text style={{fontSize:16}}>点击改变透明度</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles =StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
});

AppRegistry.registerComponent(‘TouchableDemo‘,() => TouchableDemo);

4.4.运行效果截图:

4.5.实例演示onPress,onPressIn,onPressOut,onLongPress方法代码如下:

‘use strict‘;
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from‘react-native‘;

var TouchableDemo =React.createClass({
    getInitialState: function() {
    return {
      eventLog: [],
    };
  },
  render: function() {
    return (
      <View >
        <View style={[styles.row,{justifyContent: ‘center‘}]}>
          <TouchableOpacity
            style={styles.wrapper}
            onPress={() =>this._appendEvent(‘press‘)}
            onPressIn={() =>this._appendEvent(‘pressIn‘)}
            onPressOut={() =>this._appendEvent(‘pressOut‘)}
            onLongPress={() =>this._appendEvent(‘longPress‘)}>
            <Text style={styles.button}>
              Press Me
            </Text>
          </TouchableOpacity>
        </View>
        <View  style={styles.eventLogBox}>
          {this.state.eventLog.map((e, ii)=> <Text key={ii}>{e}</Text>)}
        </View>
      </View>
    );
  },
  _appendEvent: function(eventName) {
    var limit = 6;
    var eventLog = this.state.eventLog.slice(0,limit - 1);
    eventLog.unshift(eventName);
    this.setState({eventLog});
  },
});
const styles =StyleSheet.create({
  button: {
    color: ‘#007AFF‘,
  },
  wrapper: {
    borderRadius: 8,
  },
  eventLogBox: {
    padding: 10,
    margin: 10,
    height: 120,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: ‘#f0f0f0‘,
    backgroundColor: ‘#f9f9f9‘,
  },
});
AppRegistry.registerComponent(‘TouchableDemo‘,() => TouchableDemo);

4.6.运行效果截图:

(五)TouchableNativeFeedback

5.1.TouchableNativeFeedback组件介绍

该封装了可以进行响应触摸事件的组件(仅限Android平台)。在Android平台上面该该组件可以使用原生平台的状态资源来显示触摸状态变化。【特别注意】现如今该组件只是支持仅有一个View的子视图实例(作为子节点)。在底层实现上面实际上面是创建一个新的RCTView的节点来进行替换当前的View节点视图，并且可以携带一些附加的属性。

该组件触摸反馈的背景图资源可以通过background属性进行自定义设置

下面一个很简单的使用实例方法如下:

var TouchableDemo =React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <Text>
           TouchableNativeFeedback实例
        </Text>
        <TouchableNativeFeedback style={{marginTop:20}}>
            <View style={{width: 150,height: 100, backgroundColor: ‘red‘}}>
               <Text style={{margin:30}}>Button</Text>
            </View>
        </TouchableNativeFeedback>
      </View>
    );
  }
});

运行效果如下:

5.2.属性方法介绍

  • TouchableWithoutFeedback的 属性，这边TouchableHighlight组件全部可以进行使用
  • background  backgroundPropType  该用来设置背景资源的类型，该属性会传入一个type属性和依赖的额外资源的data的对象。官方推荐采用如下的静态方法来进行生成该dictionary对象

①:TouchableNativeFeedback.SelectableBackground()   该会创建使用android默认主题背景(?android:attr/selectableItemBackground)

②:TouchableNativeFeedback.SelectableBackgroundBorderless()  该会创建使用android默认的无框的主题背景(?android:attr/selectableItemBackgroundBorderless)。不过该参数需要Android API 21+才可以使用

③:TouchableNativeFeedback.Ripple(color,borderless)  该会创建当组件被按下的时候有一个水滴的效果.通过color参数指定颜色，如果borderless为true的时候，那么该水滴效果会渲染到该组件视图的外边。同样该背景类型参数也需要Android API 21+才可以使用

5.3.使用实例代码:

①:首先设置backgroundPropType为默认的背景效果代码:

var TouchableDemo =React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <Text>
           TouchableNativeFeedback实例
        </Text>
        <TouchableNativeFeedback style={{marginTop:20}}
           background={TouchableNativeFeedback.SelectableBackground()}>
            <View style={{width: 150,height: 100,}}>
               <Text style={{margin:30}}>Button</Text>
            </View>
        </TouchableNativeFeedback>
      </View>
    );
  }
});

效果如下:

(六)最后总结

今天我们主要学习一下Touchable*系列组件的使用详解，该系列组件包括四种分别为:TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

关注我的微博，可以获得更多精彩内容

时间： 2024-10-06 03:33:27

【React Native开发】React Native控件之Touchable*系列组件详解(18)的相关文章

Android控件Editext、TextView属性详解

EditText属性描述 android:layout_gravity="center_vertical"//设置控件显示的位置:默认top,这里居中显示,还有bottom android:hint="请输入数字!"//设置显示在空间上的提示信息 android:numeric="integer"//设置只能输入整数,如果是小数则是:decimal android:singleLine="true"//设置单行输入,一旦设置为

DevExpress控件-lookupedit的使用方法详解（图文）转http://blog.csdn.net/qq395537505/article/details/50920508

绑定数据源: lookupedit.Properties.ValueMember = 实际要用的字段; //相当于editvalue lookupedit.Properties.DisplayMember =要显示的字段; //相当于text lookupedit.Properties.DataSource = 数据源; 常用属性 lookupedit.PopupWidth = 100; //下拉框宽度 lookupedit.NullText = "";//空时的值 lookupedi

MFC中listbox控件中各种属性的详解

 ListBox控件是Windows 窗体的一个空间,ListBox 控件显示一个项列表,用户可从中选择一项或多项.      如果项总数超出可以显示的项数,则自动向 ListBox 控件添加滚动条.当 MultiColumn 属性设置为 true 时,列表框以多列形式显示项,并且会出现一个水平滚动条.当 MultiColumn 属性设置为 false 时,列表框以单列形式显示项,并且会出现一个垂直滚动条.当 ScrollAlwaysVisible 设置为 true 时,无论项数多少都将显示滚动

javascript控件开发之工具栏控件

在前几篇的基础上,本篇将开发工具栏控件,工具栏控件一般包括三部份, 1.toolBar控件,简单说就是工具栏容器, 2.toolButton控件,即工具栏上的按钮控件,该按钮控件包括图标和文字两部份, 3.则是分隔符控件,一般分隔符控件也是在toolButton控件基础上引申出来的, 为了简单易学,我们这里直接用上一篇的控件作为toolBar控件使用,也就是我们这次编写出来的toolButton控件直按放一Panel控件上, 首先在component\ui\文件夹下添加控件文件,com.ui.t

IOS开发自定义CheckBox控件

IOS本身没有系统的CheckBox组件,但是实际开发中会经常用到,所以专门写了一个CheckBox控件,直接上代码 效果图: UICheckBoxButton.h文件如下: #import #import "Common.h" @interface UICheckBoxButton : UIControl { UILabel *label; UIImageView *icon; BOOL checked; id delegate; } @property (retain, nonat

Java开发，AWT控件的中文显示成乱码的解决方法

使用Java开发程序时,AWT控件上的中文在程序运行的时候显示成乱码,这是myeclipse的运行参数设置的问题. 解决方法: 第一:在你的具有main函数的类也即你应用运行的主类上点击右键,选择Run As中的Run Configurations,如下图: 第二,在Arguments标签下的VM arguments中添加下面这行参数代码,然后点击应用. -Dfile.encoding=GB18030 重新运行程序,就能够正常的显示中文了.Java开发,AWT控件的中文显示成乱码的解决方法

PhoneGap+HTML5+jqueryMobile 开发安卓-DATE控件

原文:PhoneGap+HTML5+jqueryMobile 开发安卓-DATE控件 源代码下载地址:http://www.zuidaima.com/share/1550463778802688.htm DATE控件在安卓底下是无法正常调用安卓的日期键盘,需要利用PhoneGap对安卓的原生控件进行调用,但是还是没达到最佳效果,找到一个临时解决方案,给大家分享下,如果大家有更好的解决方案大家可以分享下,此方法有个缺陷就是控件有值的情况下无法调用时间控件. /** * */ package com

完全使用托管C#开发的条形码控件ThermalLabel SDK for .NET

ThermalLabel SDK for .NET条形码控件是一个用VB.NET或C#开发的纯.NET的一个类库(DLL), 可用该组件来设计条码并在Zebra Thermal Printer(任何支持ZPL® or ZPL II® 语言/仿真程序的打印机)上打印这些条码.ThermalLabel SDK可以用于设计和打印简单到复杂的标签布局,它支持文本.条码.图形图象.表格和网格,并能插入如圆.椭圆.矩形以及线条等自选编辑图形. 具体功能: 完全使用托管C#开发. .NET Framework

RS开发日期提示控件默认为昨天之进阶篇

时隔<RS开发日期提示控件默认为昨天>这篇博文已经很久了,请原谅我隔了这么久才继续来写这篇笔记.也希望读到这篇笔记的朋友可以从这篇笔记中学习到一些关于RS日期控件和JS的一些应用知识,当然这也可以为给业务部门做月报的同学提供一个高易用性的日期处理办法. 1:确保报表有提示页面,提示页面提供了给日期提示控件设置默认值为昨天的功能 2:确保[日期维度].[日]的key值格式为2009-01-01 yyyy-mm-dd 3:确保[事实].[日期]的格式为2009-01-01 yyyy-mm-dd 4