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

現在就簡單的討論一下React-native中的Touch觸摸事件，首先在React-native中，觸摸事件有如下幾種：

引用一下官方文檔的話：
一般來說，你可以使用TouchableHighlight來制作按鈕或者鏈接。注意此組件的背景會在用戶手指按下時變暗。

在Android上還可以使用TouchableNativeFeedback，它會在用戶手指按下時形成類似墨水漣漪的視覺效果。

TouchableOpacity會在用戶手指按下時降低按鈕的透明度，而不會改變背景的顏色。

如果你想在處理點擊事件的同時不顯示任何視覺反饋，則需要使用TouchableWithoutFeedback。

<br />

我們一個一個的來看：

首先要介紹TouchalbeWithoutFeedback,為什么先介紹他，因為他是其他三個的基類。
介紹幾個比較重要的屬性：

delayLongPress:延時觸發長按
number
單位是毫秒，從onPressIn開始，到onLongPress被調用的延遲。

delayPressIn : 延時響應按下
number
單位是毫秒，從觸摸操作開始到onPressIn被調用的延遲。

delayPressOut 延時響應結束按下
number
單位是毫秒，從觸摸操作結束開始到onPressOut被調用的延遲。

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

onLongPress:長按
function

onPress:點擊
function

onPressIn:按下
function

onPressOut:結束按下（離開）
function

<br />

TouchableHighlight:繼承TouchWithoutFeedback

屬性：

underlayColor 按下時的顏色 string
onShowUnderlay 底層顏色被顯示時調用 function
onHideUnderlay 底層顏色被隱藏時調用 function
activityOpacity 激活時不透明度 number

TouchableOpacity:繼承TouchWithoutFeedback

屬性：

activityOpacity 激活時不透明度 number

<br />

還有一個是Android的控件,這里不做介紹

<br />

廢話不多說：直接上代碼

/**
 * 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 (
      <View style={styles.container}>
          <Text 
            style={{
              flex:1,
              paddingTop:100,
              color:'red',
              fontSize:20}}>
                {this.state.text}
          </Text>
          <TouchableHighlight 
            onPress={() => {
              this.setState({text:"higlight"});
            }}
            underlayColor="red">
            <Text style={{flex:1,paddingTop:10}}> TouchableHighlight  </Text>
          </TouchableHighlight>
          <TouchableHighlight 
            onLongPress={() => {
              this.setState({text:"longPress"});
            }}
            underlayColor="red">
            <Text style={{flex:1,paddingTop:10}}> TouchableHighlight longPress </Text>
          </TouchableHighlight>
          <TouchableOpacity 
            onPress={this._opacity.bind(this)} >
            <Text style={{flex:1,paddingTop:10}}> TouchableOpacity </Text>
          </TouchableOpacity>
          <TouchableWithoutFeedback
           onPress={this._feedback.bind(this)} >
            <Text style={{flex:1,paddingTop:10}}> TouchableWithoutFeedback </Text>
          </TouchableWithoutFeedback>

          <TouchableHighlight
            underlayColor='#ddd'
            onPressIn={ () =>{
              this.setState({text:this.state.text + '\nonPressIn'});
            }}
            onPressOut={ () =>{
              this.setState({text:this.state.text + '\nonPressOut'});
            }}
          >
          <Text style={{flex:1,paddingBottom:50,color:'skyblue',fontSize:30}}>點我顯示響應步驟</Text>
          </TouchableHighlight>

      </View>
    );
  }
}

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

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

<br />

效果圖

效果圖

<br />

結論：

• 1 如果同時實現onPress onPressIn onPressOut，不會響應onPressOut。
• 2 在沒有設置delayPressIn的情況下，快速點擊不會響應onPressIn，只會響應onPress，可以通過設置delayPressIn={0}來達到響應的效果，但是響應順序是onPress→onPressIn
• 3 設置activeOpacity，可以設置按下時控件的不透明度