IOS React-native 触摸事件

前言在APP中,交互是很重要的一部分，最基本的交互大致有点击、长按、滑动、拖拽等操作。

现在就简单的讨论一下React-native中的Touch触摸事件，首先在React-native中，触摸事件有如下几种：

引用一下官方文档的话：
一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。

TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

我们一个一个的来看：

首先要介绍TouchalbeWithoutFeedback,为什么先介绍他，因为他是其他三个的基类。
介绍几个比较重要的属性：

delayLongPress:延时触发长按
number
单位是毫秒，从onPressIn开始，到onLongPress被调用的延迟。

delayPressIn : 延时响应按下
number
单位是毫秒，从触摸操作开始到onPressIn被调用的延迟。

delayPressOut 延时响应结束按下
number
单位是毫秒，从触摸操作结束开始到onPressOut被调用的延迟。

disabled:交互
bool
true：禁止此组件一切交互

onLongPress:长按
function

onPress:点击
function

onPressIn:按下
function

onPressOut:结束按下（离开）
function

TouchableHighlight:继承TouchWithoutFeedback

属性：

underlayColor 按下时的颜色 string
onShowUnderlay 底层颜色被显示时调用 function
onHideUnderlay 底层颜色被隐藏时调用 function
activityOpacity 激活时不透明度 number

TouchableOpacity:继承TouchWithoutFeedback

属性：

activityOpacity 激活时不透明度 number

还有一个是Android的控件,这里不做介绍

废话不多说：直接上代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

'use strict';

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TouchableWithoutFeedback,
  TouchableHighlight,
} from 'react-native';



class HandleTouches extends Component {
  constructor(props){
    super(props);
    this.state = {
      text:'first',
      step:' dd',
    };
  }



  _highlight(){
    console.log("highlight");
    this.setState({text:"higlight"});
  }

  _opacity(){
    console.log("opacity");
    this.setState({text:"opacity"});
  }

  _feedback(){
    console.log("feedback");
    this.setState({text:"feedback"});
  }
  
  render() {
    return (
      
          
                {this.state.text}
          
           {
              this.setState({text:"higlight"});
            }}
            underlayColor="red">
             TouchableHighlight  
          
           {
              this.setState({text:"longPress"});
            }}
            underlayColor="red">
             TouchableHighlight longPress 
          
          
             TouchableOpacity 
          
          
             TouchableWithoutFeedback 
          

          {
              this.setState({text:this.state.text + '\nonPressIn'});
            }}
            onPressOut={ () =>{
              this.setState({text:this.state.text + '\nonPressOut'});
            }}
          >
          点我显示响应步骤
          

      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('HandleTouches', () => HandleTouches);

效果图

效果图

结论：

• 1 如果同时实现onPress onPressIn onPressOut，不会响应onPressOut。
• 2 在没有设置delayPressIn的情况下，快速点击不会响应onPressIn，只会响应onPress，可以通过设置delayPressIn={0}来达到响应的效果，但是响应顺序是onPress→onPressIn
• 3 设置activeOpacity，可以设置按下时控件的不透明度