Animation React Native：如何使用bounce从屏幕上滑动某些内容？

我在试着做一些你可以从屏幕上滑动覆盖的东西

这就是我目前使用的

PanResponder

，但我觉得它不是很干净。这是我第一次使用它，所以我想知道是否有更好的方法

我需要动画的绿色部分和更多，所以我想建立这一点，如果可能的话，不使用包

我的组件看起来像这样（大量复制了这个家伙： )

import React，{Component}来自'React'；
进口{
评估学，
样式表，
看法
应答器，
有生气的
尺寸，
}从“反应本机”；
const styles=StyleSheet.create({
容器：{
弹性：1，
自我定位：“拉伸”，
背景颜色：'#000000'，
},
覆盖：{
弹性：1，
自我定位：“拉伸”，
背景颜色：“#0000ff”，
},
视频：{
位置：'绝对'，
背景颜色：“#00ff00”，
排名：0，
左:0,，
底部：0，
右:0,，
}
});
功能钳位（值、最小值、最大值）{
返回最小值<最大值
？（值<最小？最小：值>最大？最大：值）
：（值<最大？最大：值>最小？最小：值）
}
导出默认类EdmundApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
平移：新的动画.ValueXY（），
};
}
组件willmount（）{
这是.\u panResponder=panResponder.create({
onMoveShouldSetResponderCapture:（）=>true，
onMoveShouldSetPanResponderCapture:（）=>true，
onPanResponderGrant:（e，手势状态）=>{
this.state.pan.setOffset（{x:this.state.pan.x.\u值，y:0}）；
this.state.pan.setValue（{x:0，y:0}）；
},
onPanResponderMove:Animated.event([
null，{dx:this.state.pan.x，dy:0}，
]),
onPanResponderRelease:（e，{vx，vy}）=>{
this.state.pan.flattOffset（）；
如果（vx>=0）{
速度=夹具（vx，3，5）；
}否则如果（vx<0）{
速度=夹具（vx*-1,3,5）*-1；
}
if（Math.abs（此.state.pan.x.\u值）>150）{
已设置动画。衰变（this.state.pan{
速度：{x:velocity，y:vy}，
减速度：0.98
}).start（）
}否则{
动画.spring（this.state.pan{
toValue:{x:0，y:0}，
摩擦力：4
}).start（）
}
}
});
}
render（）{
设{pan}=this.state；
设translateX=pan.x；
设swipeStyles={transform:[{translateX}]}；
返回(
请仔细检查一下

有一个弹跳和退出选项，这对您肯定会有帮助。
如果您有任何疑问，请在这里发表意见。如果我将其滑动不到一半，它会回到原来的位置吗？请访问并管理您的幻灯片，是的，它会回到原来的位置对不起，您介意给我举个例子吗？我感觉像是滑动的我需要能够从屏幕上刷下一些东西，比如在演示中，这就像刷一个像tinder应用程序一样的卡片一样吗？
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  PanResponder,
  Animated,
  Dimensions,
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#000000',
  },
  overlay: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#0000ff',
  },
  video: {
    position: 'absolute',
    backgroundColor: '#00ff00',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  }
});

function clamp(value, min, max) {
  return min < max
    ? (value < min ? min : value > max ? max : value)
    : (value < max ? max : value > min ? min : value)
}

export default class EdmundApp extends Component {

  constructor(props) {
    super(props);
    this.state = {
      pan: new Animated.ValueXY(),
    };
  }

  componentWillMount() {
    this._panResponder = PanResponder.create({
      onMoveShouldSetResponderCapture: () => true,
      onMoveShouldSetPanResponderCapture: () => true,

      onPanResponderGrant: (e, gestureState) => {
        this.state.pan.setOffset({x: this.state.pan.x._value, y: 0});
        this.state.pan.setValue({x: 0, y: 0});
      },

      onPanResponderMove: Animated.event([
        null, {dx: this.state.pan.x, dy: 0},
      ]),

      onPanResponderRelease: (e, {vx, vy}) => {
        this.state.pan.flattenOffset();
        if (vx >= 0) {
          velocity = clamp(vx, 3, 5);
        } else if (vx < 0) {
          velocity = clamp(vx * -1, 3, 5) * -1;
        }

        if (Math.abs(this.state.pan.x._value) > 150) {
          Animated.decay(this.state.pan, {
            velocity: {x: velocity, y: vy},
            deceleration: 0.98
          }).start()
        } else {
          Animated.spring(this.state.pan, {
            toValue: {x: 0, y: 0},
            friction: 4
          }).start()
        }
      }
    });
  }

  render() {
    let { pan } = this.state;
    let translateX = pan.x;
    let swipeStyles = {transform: [{translateX}]};
    return (
      <View style={styles.container}>
        <View style={styles.video}></View>
        <Animated.View style={[styles.overlay, swipeStyles]} {...this._panResponder.panHandlers}>
        </Animated.View>
      </View>
    );
  }
}

AppRegistry.registerComponent('EdmundApp', () => EdmundApp);