推荐使用:React Native Gesture Handler - 原生触控手势管理系统
warning:
这篇文章距离上次修改已过202天,其中的内容可能已经有所变动。
React Native提供了一个名为PanResponder
的API,它可以帮助我们识别用户的触摸移动手势。以下是一个简单的例子,展示如何使用PanResponder
来实现一个可以被拖动的视图。
import React, { Component } from 'react';
import { StyleSheet, View, Text, PanResponder } from 'react-native';
export default class DraggableView extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(), // 初始化一个值,用于记录移动的位置
};
this.panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => true, // 总是响应移动事件
onPanResponderMove: Animated.event([
null, { dx: this.state.pan.x, dy: this.state.pan.y } // 更新移动位置
]),
onPanResponderRelease: (evt, gestureState) => {
// 当用户释放触摸时,设置一个spring动画用于回弹效果
Animated.spring(this.state.pan, {
toValue: { x: 0, y: 0 }
}).start();
}
});
}
render() {
return (
<View style={styles.container}>
<Animated.View
style={{
...styles.draggable,
transform: this.state.pan.getTranslateTransform()
}}
{...this.panResponder.panHandlers}
>
<Text>Drag me!</Text>
</Animated.View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
draggable: {
width: 150,
height: 150,
backgroundColor: 'blue',
justifyContent: 'center',
alignItems: 'center',
}
});
这段代码创建了一个名为DraggableView
的组件,它使用PanResponder
来处理触摸事件。用户可以点击并拖动蓝色方块来移动它。当用户释放触摸时,它会以弹簧动画的形式返回到原始位置。这是React Native中实现触摸移动手势的一个基本例子。
评论已关闭