【React Native開發】- 觸摸事件處理

1.介紹

React Native提供了可以處理觸摸事件的組件。觸摸即點擊、長按、滑動、縮放。

2.點擊

處理點擊操作事件，可以使用Touchable類組件，通過此類組件的onPress屬性實現點擊事件處理函數；一個完整的點擊事件是

手指按下並擡起。

import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    TouchableHighlight,
    ToastAndroid,
} from 'react-native'
export default class Click extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    activeOpacity ={0.8}
                    underlayColor='#eee'
                    onPress={this._click.bind(this)}
                    style={styles.touchStyle}>
                    <Text>點擊事件</Text>
                </TouchableHighlight>
            </View>
        )
    }
    _click(){
        ToastAndroid.show('點擊事件',1000)
    }
}
const  styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    touchStyle:{
       padding:5,
        borderWidth:1,
        borderRadius:8,
        borderColor:'#ccc'
    },
})

效果：

3.長按

處理長按事件，可以使用Touchable類組件，通過此類組件的onLongPress屬性實現點擊事件處理函數；

<TouchableHighlight
   activeOpacity ={0.8}
   underlayColor='#eee'
   onLongPress={this._longClick.bind(this)}
   style={styles.touchStyle}>
   <Text>長按事件</Text>
</TouchableHighlight>   

4.滑動

可滾動的列表是移動應用中一個常見的模式。

ScrollView可以在垂直或水平方向滾動，還可以配置pagingEnabled屬性來讓用戶整屏整屏的滑動。此外，水平方向的滑動還可以使用Android上的ViewPageAndroid組件。

ListView是一種特殊的ScrollView，用於顯示比較長的垂直列表。

5.縮放

在ScrollView中只放置一個組件，則可以用來實現縮放操作。設置maximumZoomScale(ios平臺獨有)和minimumZoomScale(ios平臺獨有)屬性即可以使用戶能夠縮放其中的內容。