從零學React Native之09可觸摸組件

標籤：

可觸摸組件有:
TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback
1. TouchableWithoutFeedback,在使用者觸摸的時候沒有反饋任何觸摸效果,體驗很不好,基本很少使用.
2. TouchableNativeFeedback 是Android作業系統專用組件,使用原生控制項相應的狀態來展示, 比如5.0以上產生漣漪效果.
3. TouchableHighlight與TouchableOpacity都產生視覺效果, 其中TouchableOpacity是四者中使用最多的.

TouchableHighlight

當一個組件成為TouchableHighlight組件的子組件後,這個組件觸摸時會產生一種變暗的效果,原理就是讓被子組件遮蓋住的下一層顏色向上透出來,這樣就使子組件變暗或顏色, 預設透傳上來是黑色, 可以通過underlayColor指定透傳的顏色。activeOpacity屬性可以指定透明度. 預設是0.8。
TouchableHighlight 還有一個bug，來看下面的代碼：

import React, { Component } from ‘react‘;import {    AppRegistry,    StyleSheet,    View,    TouchableHighlight,    TouchableOpacity,    TouchableNativeFeedback} from ‘react-native‘;class AwesomeProject extends Component {    render() {        return (            //根View            <View style={{flex:1,backgroundColor:‘white‘}}>               <TouchableHighlightonPress={this.buttonPressed}>                   <View style={{width:120,height:70,backgroundColor:‘grey‘}}/>                   </TouchableHighlight>            </View>        );    }    buttonPressed(){       console.log("press");    }}

按下前效果:

按下的效果:

可以看到右側不應該變暗的地方也變暗了， 這個可以在右側增加一些其他需要顯示的組件，或者為整個背景加個圖片就可以解決。 當然還是建議大家使用TouchableOpacity。

TouchableOpacity

當一個組件成為TouchableOpacity組件的子組件後, 這個組件被觸摸時會變成半透明的組件,通過activeOpacity 控制透明度, 預設是0.2 。
修改上面的代碼：

  ...    render() {        return (            //根View            <View style={{flex:1,backgroundColor:‘white‘}}>               <TouchableOpacity onPress={this.buttonPressed}>                   <View style={{width:120,height:70,backgroundColor:‘grey‘}}/>                </TouchableOpacity>            </View>        );    }  ...

TouchableOpacity按下效果:

回呼函數和其它屬性

1. onPress 點擊事件回呼函數
2. onLongPress 長按事件
3. delayLongPress 設定長按事件的時間長度是多少毫米 預設是500ms
4. delayPressOut 設定離開螢幕多少毫秒後 onPressOut事件被啟用, 預設是0
5. delayPressIn 設定手指觸控螢幕幕多少毫米厚, onPressIn事件被啟用,預設是0

從零學React Native之09可觸摸組件