【React Native開發】 - Touchable類組件的使用

1.Touchable類組件介紹

ReactNative沒有像web開發那樣可以給元素（組件）綁定click事件。不過可以通過onPress實現點擊事件的處理。

 - TouchableHighlight:高亮觸摸。用戶點擊時，會產生高亮效果。

 - TouchableOpacity:透明觸摸。用戶點擊時，點擊的組件會出現透明過渡效果。

 - TouchableWithoutFeedback:無反饋行觸摸。用戶點擊時，點擊的組件不會出現任何視覺變化。

 - TouchableNativeFeedback:（僅限Android）這個組件利用原生狀態渲染觸摸組件。由於不跨平臺，不建議使用。

2.TouchableHighlight高亮觸摸

在ReactNative App中，我們希望點擊時會有視覺上的變化。視覺上的變化會告知我們已經點擊了，避免重複點擊。

TouchableHighlight組件屬性有：

 - activeOpacity:觸摸時透明度（0 - 1）；

 - onHideUnderlay:隱藏背景陰影時觸發該事件；

 - onShowUnderlay:顯示背景陰影時觸發該事件；

 - underlayColor:點擊時背景陰影效果的背景顏色。

3.TouchableOpacity透明觸摸

TouchableOpacity組件不用設置背景顏色，該組件只有一個屬性：activeOpacity。

4.TouchableWithoutFeedback無反饋行觸摸

就像官網上所說的那樣，除非有充足的理由，你才使用TouchableWithoutFeedback組件，一般不建議使用該組件，如果沒有

反饋的話，就像web交互，而不是native交互。

TouchableWithoutFeedback組件支持3個事件：

 - onLongPress:長按事件；

 - onPressIn:觸摸進入事件；

 - onPressOut:觸摸釋放事件。

5.注意事項

 - TouchableWithoutFeedback組件是觸摸點擊不帶反饋效果的，另外三個有反饋效果。這三個組件都繼承TouchableWithoutFeedback的屬性。

 - TouchableHighlight和TouchableOpacity只有設置onPress後，對應的背景和透明度纔有效。

6.實例

import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    TouchableHighlight,
    TouchableOpacity,
} from 'react-native'
export default class Root extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
                <TouchableHighlight style={styles.touchableBtn} 
                                    activeOpacity={0.8}
                                    underlayColor='#FF3333'
                                    onPress={this.touchable.bind(this,'高亮觸摸')}>
                    <Text style={styles.text}>TouchableHighlight觸摸</Text>
                </TouchableHighlight>
                <TouchableOpacity style={[styles.touchableBtn,{marginTop:15}]}
                                  activeOpacity={0.8}
                                  onPress={this.touchableOpacity.bind(this,'透明觸摸')}>
                    <Text style={styles.text}>TouchableOpacity觸摸</Text>
                </TouchableOpacity>
            </View>
        )
    }
    touchable(text){
        alert(text)
    }
    touchableOpacity(text){
        alert(text)
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    touchableBtn:{
        backgroundColor:'#FD6363',
        padding:5,
        borderRadius:8,
    },
    text:{
        color:'#fff',
        fontSize:14,
    },
})

7.效果