【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平台独有)属性即可以使用户能够缩放其中的内容。