前言

• 學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習

• 本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝

• 文章第一版出自簡書，如果出現圖片或頁面顯示問題，煩請轉至 簡書 檢視 也希望喜歡的朋友可以點贊，謝謝

View 中的觸控屬性 與 Touchable 的對比

• 學完之前的內容後，是不是有個疑問 —— 介面我們是搭建出來了，那為什麼不會對使用者的點選、觸控、拖拽做出反應？這篇就結合前面的內容加上小案例來解答疑惑

• 其實在 React Native 中，想實現手勢監聽很簡單，有兩種方式

  • 標籤中有許多 on 開頭的屬性可以供我們使用，但是在不同標籤上有的屬性是不能做出相應的響應的，比如下面的例子,同樣的屬性，在View上不可使用，在Text上就可以
    
    
    

      var textInputTest = React.createClass({
          render(){
              return(
                  <View style={styles.container}>
                      {/* 例項化一個View */}
                      <View style={styles.testViewStyle} onPressIn={() => {alert('點選'
   
  )}}>
                      </View>
                      {/* 例項化一個Text */}
                      <Text style={styles.testTextStyle} onPress={() => {alert('點選')}}></Text>
                  </View>
              );
          }
      });
  
      var styles = StyleSheet.create({
          container: {
              flex:1
   
  ,
              backgroundColor:'gray'
          },
  
          testViewStyle: {
              // 設定尺寸
              width:width,
              height:40,
              marginTop:20,
              // 設定背景顏色
              backgroundColor:'red'
          },
  
          testTextStyle: {
              // 設定尺寸
              width:width,
              height:40,
              marginTop:20,
              // 設定背景顏色
              backgroundColor:'yellow'
          }
      });

  效果：

• 為了避免上面問題，在開發中推薦使用 Touchable 的方式來實現使用者點選事件的包裝

  • 首先，既然要使用Touchable,那麼肯定要先告訴系統在哪裡找到它
    
    
    

      import {
          AppRegistry,
          StyleSheet,
          Text,
          View,
          TouchableOpacity
      } from 'react-native';
  

  • 完成上面的步驟我們就可以使用Touchable來包裝我們的標籤了，格式如下
    
    
    

      <TouchableOpacity Touchable屬性>
          <需要包裝的標籤></需要包裝的標籤>
      </TouchableOpacity>
  

  • 這裡就來將上面的方式更改一下，從中可以看出，不僅可以讓標籤有接收觸控事件能力，還出現了不透明的效果（類似於高亮的效果）
    
    
    

      var textInputTest = React.createClass({
          render(){
              return(
                  <View style={styles.container}>
                      {/* 包裝View */}
                      <TouchableOpacity
                          onPress={() => {alert('點選了View')}}
              >
                      <View style={styles.testViewStyle}></View>
                      </TouchableOpacity>
                      {/* 包裝Text */}
                      <TouchableOpacity
                          onPress={() => {alert('點選了Text')}}
              >
                          <Text style={styles.testTextStyle}></Text>
                      </TouchableOpacity>
                  </View>
              );
          }
      });
  

  效果：

• 好了，先介紹到這裡，下面來看下Touchable常用屬性

Touchable 常用屬性介紹

• Touchable 中包含兩種觸控類別：TouchableHighlight(高亮觸控)、TouchableOpacity(不透明觸控)

  • TouchableHighlight(高亮觸控)：當手指點下的時候，該檢視的不透明度會進行降低同時會看到相應的顏色（原理：在底層新新增一個View）,需要注意的是TouchableHighlight只能進行一層巢狀，不能多層巢狀，如果需要多層巢狀就要用View包裝

    • activeOpacity：設定元件在進行觸控時候，顯示的不透明度（取值：0 ~ 1）
    • onHideUnderlay：當底層被隱藏的時候呼叫
    • onShowUnderlay：當底層顯示的時候呼叫
    • style：可以設定控制元件的風格演示，該風格演示可以參考View元件的style
    • underlayColor：當觸控或者點選控制元件的時候顯示出的顏色
    • TouchableWithoutFeedback：這個屬性說明了這個元件繼承了所有TouchableWithoutFeedback的屬性
      
      • disabled：如果為true,則禁止此元件的一切互動
      • hitSlop {top: number, left: number, bottom: number, right: number}：這一屬性定義了按鈕的外延範圍。這一範圍也會使pressRetentionOffset（見下文）變得更大。 注意：觸控範圍不會超過父檢視的邊界，也不會影響原先和本元件層疊的檢視（保留原先的觸控優先順序）
      • onLayout{nativeEvent: {layout: {x, y, width, height}}}：當載入或者佈局改變的時候被呼叫
      • onLongPress：長按
      • onPress：點選
      • onPressIn：按住
      • onPressOut：擡起
      • pressRetentionOffset {top: number, left: number, bottom: number, right: number}：在當前檢視不能滾動的前提下指定這個屬性，可以決定當手指移開多遠距離之後，會不再啟用按鈕。但如果手指再次移回範圍內，按鈕會被再次啟用。只要檢視不能滾動，你可以來回多次這樣的操作。確保你傳入一個常量來減少記憶體分配

  • TouchableOpacity(不透明觸控)：該元件封裝了響應觸控事件，當點選按下的時候，該元件的透明度會降低

    • activeOpacity：設定當用戶觸控的時候，元件的透明度（取值：0 ~ 1）
    • TouchableWithoutFeedback：這個屬性說明了這個元件繼承了所有TouchableWithoutFeedback的屬性
      
      • disabled：如果為true,則禁止此元件的一切互動
      • hitSlop {top: number, left: number, bottom: number, right: number}：這一屬性定義了按鈕的外延範圍。這一範圍也會使pressRetentionOffset（見下文）變得更大。 注意：觸控範圍不會超過父檢視的邊界，也不會影響原先和本元件層疊的檢視（保留原先的觸控優先順序）
      • onLayout{nativeEvent: {layout: {x, y, width, height}}}：當載入或者佈局改變的時候被呼叫
      • onLongPress：長按
      • onPress：點選
      • onPressIn：按住
      • onPressOut：擡起
      • pressRetentionOffset {top: number, left: number, bottom: number, right: number}：在當前檢視不能滾動的前提下指定這個屬性，可以決定當手指移開多遠距離之後，會不再啟用按鈕。但如果手指再次移回範圍內，按鈕會被再次啟用。只要檢視不能滾動，你可以來回多次這樣的操作。確保你傳入一個常量來減少記憶體分配

常見的觸控事件演示

• TouchableHighlight（高亮觸控）

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 點選 */}
                    <TouchableHighlight
                        onPress={() => {alert('點選')}}
                        underlayColor={'red'}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableHighlight>

                    {/* 按下 */}
                    <TouchableHighlight
                        onPressIn={() => {alert('按下')}}
                        underlayColor={'orange'}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableHighlight>

                    {/* 擡起 */}
                    <TouchableHighlight
                        onPressOut={() => {alert('擡起')}}
                        underlayColor={'blue'}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableHighlight>

                    {/* 長按 */}
                    <TouchableHighlight
                        onLongPress={() => {alert('長按')}}
                        underlayColor={'yellow'}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableHighlight>
                </View>
            );
        }
    });

效果：

• TouchableOpacity（不透明觸控）

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 點選 */}
                    <TouchableOpacity
                        onPress={() => {alert('點選')}}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>

                    {/* 按下 */}
                    <TouchableOpacity
                        onPressIn={() => {alert('按下')}}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>

                    {/* 擡起 */}
                    <TouchableOpacity
                        onPressOut={() => {alert('擡起')}}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>

                    {/* 長按 */}
                    <TouchableOpacity
                        onLongPress={() => {alert('長按')}}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>
                </View>
            );
        }
    });

效果：