【React Native开发】- 触摸事件处理

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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



以上是 【React Native开发】- 触摸事件处理 的全部内容， 来源链接： utcz.com/z/384291.html

回到顶部