使用Animated.View实现全屏页面可以向下拖动,松开手指页面返回原处的效果

使用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 (                            内容                    );};const styles = StyleSheet.create({  container: {    flex: 1,  },  animatedView: {    borderColor: 'red',    borderWidth: 1,    borderStyle: 'solid',    flex: 1,  },});export default TestDragCard;