使用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.View
          style={[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;