前言
學習本系列內容需要具備一定 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' } });效果：
- 標簽中有許多
行內on屬性行為比對.gif
-
為了避免上面問題，在開發中推薦使用 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行為比對.gif
- 好了，先介紹到這里，下面來看下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>
);
}
});
效果：
TouchableHighlight效果.gif
- 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>
);
}
});
效果：
TouchableOpacity效果.gif
