【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平台独有)

属性即可以使用户能够缩放其中的内容。