使用Animated.View实现全屏页面可以向下拖动,松开手指页面返回原处的效果
效果示例图
代码示例
import React, {useRef, useState} from 'react';
import {View,Text,Animated,Easing,PanResponder,StyleSheet,
} from 'react-native';const TestDragCard = () => {const pan = useRef(new Animated.ValueXY()).current;const panResponder = PanResponder.create({onMoveShouldSetPanResponder: () => true,onPanResponderMove: (evt, gestureState) => {console.log('{ds]', gestureState.dy);Animated.event([null, {dy: pan.y}], {useNativeDriver: false,})(evt, gestureState);},onPanResponderRelease: (e, gestureState) => {if (gestureState.dy > 50) {Animated.timing(pan, {toValue: {x: 0, y: 0},easing: Easing.linear,duration: 300,useNativeDriver: true,}).start(() => {// 模拟加载数据的异步操作console.log('[放开我]');});} else {Animated.spring(pan, {toValue: {x: 0, y: 0},friction: 5,useNativeDriver: true,}).start();}},});const panStyle = {transform: pan.getTranslateTransform(),};return (<><View style={styles.container}><Animated.Viewstyle={[panStyle, styles.animatedView]}{...panResponder.panHandlers}><Text>内容</Text></Animated.View></View></>);
};
const styles = StyleSheet.create({container: {flex: 1,},animatedView: {borderColor: 'red',borderWidth: 1,borderStyle: 'solid',flex: 1,},
});export default TestDragCard;
