React native 反应并夹紧（从中间到左上角）

我有一个图像定位在屏幕的中心，我想它移动到左上角，缩小大小，以适应我的panhandler抽屉在屏幕上的位置

panhandler只能靠近顶部或底部，其行为类似于抽屉，因此我忽略x值。我可以根据dy值将其捕捉到任意位置

挑战在于屏幕大小不同，因此“animatedStyles”中的translateX和translateY并不适用于所有屏幕大小。我在某个地方读到过，你们可以使用夹钳来确保它适合你们的屏幕，但我不知道如何正确使用它

我的想法是，我需要更改我的“动画样式”，因为panhandler代码的工作方式与我预期的一样。任何援助都将是巨大的

minDrawHeight = 50; // its the screen height mines this value
maxDrawHeight = 100 //

componentWillMount() {

    this.animation = new Animated.ValueXY({ x: 0, y: SCREEN_HEIGHT - this.minDrawHeight })

    this.panResponder = PanResponder.create({
        onMoveShouldSetPanResponder:()=> true,
        onPanResponderGrant: (evt, gestureState) => {
            this.animation.extractOffset()
        },
        onPanResponderMove: (evt, gestureState) => {
            console.log('height', SCREEN_HEIGHT);
            /*console.log('the cdata be staetid(%o), moveX(%o),moveY(%o), x0(%o),y(%o),dx(%o),dy(%o),vs(%o),VY(%o)',gestureState.stateID,gestureState.moveX,
                gestureState.moveY,gestureState.x0,gestureState.y0,
                gestureState.dx,gestureState.dy,gestureState.vx,gestureState.vy);*/

            this.animation.setValue({ x: 0, y: gestureState.dy })
        },
        onPanResponderRelease: (evt, gestureState) => {
            //check if you are going down from the lowest acceptable height
            // if you are srping back to the min height of the draw
            if ((gestureState.moveY > SCREEN_HEIGHT- this.minDrawHeight) && (gestureState.dy > 0)) {
                console.log('the option ',gestureState.moveY,gestureState.dy,SCREEN_HEIGHT-this.minDrawHeight );
                this.animation.flattenOffset();
                Animated.spring(this.animation.y, {
                    toValue: SCREEN_HEIGHT - this.minDrawHeight,
                    tension: 10,
                    useNativeDriver: false,
                }).start(()=>{
                    console.log('the new value', this.animation.y,SCREEN_HEIGHT - this.minDrawHeight)
                })
            }
            /*
                    IF you are at the lowest point but going up then automatically set to the highest point

            * */
            else if ((gestureState.moveY < SCREEN_HEIGHT- this.minDrawHeight) && (gestureState.dy < 0)) {
                this.animation.flattenOffset();
                Animated.spring(this.animation.y, {
                    toValue:this.maxDrawHeight,
                    tension: 80,
                    useNativeDriver: false,
                    //bounciness:12,
                    friction:5
                }).start()
            }
            /*
            *       IF you are at the highest point and still scrolling up
            *       then spring back to highest point
            *
            *
            * */
            else if ((gestureState.moveY < this.maxDrawHeight) && (gestureState.dy < 0)) {
                this.animation.flattenOffset();
                Animated.spring(this.animation.y, {
                    toValue:this.maxDrawHeight,
                    tension: 1,
                    useNativeDriver: false,
                }).start()
            }
            /*
            *          IF you are at the highest point and scrolling down set to lowest point
            *
            *
            * */
            else if ((gestureState.moveY > this.maxDrawHeight) && (gestureState.dy > 0)) {
                this.animation.flattenOffset();
                Animated.spring(this.animation.y, {
                    toValue:SCREEN_HEIGHT - this.minDrawHeight,
                    tension: 80,
                    useNativeDriver: false,
                    //bounciness:12,
                    friction:5
                }).start()
            }



        }
    })
}

render(){
let animateCardWidth = this.animation.y.interpolate({
        inputRange: [this.maxDrawHeight, SCREEN_HEIGHT-this.minDrawHeight],
        outputRange: [65, 175],
        extrapolate: "clamp"
    })

    let animateCardHeight = this.animation.y.interpolate({
        inputRange: [this.maxDrawHeight, SCREEN_HEIGHT-this.minDrawHeight],
        outputRange: [65, 175],
        extrapolate: "clamp"
    })
const animatedStyles = {
        transform: [
            {
                // Move the div by 120px to the left when value === 1
                translateX: this.animation.y.interpolate({
                    inputRange: [this.maxDrawHeight,SCREEN_HEIGHT-this.minDrawHeight],
                    outputRange: [-140, 0],

                    // Tells Animated to never go outside of the outputRange
                    extrapolate: 'clamp',
                })

            },
                {
                    translateY: this.animation.y.interpolate({
                        inputRange: [this.maxDrawHeight,SCREEN_HEIGHT-this.minDrawHeight],
                        outputRange: [-SCREEN_HEIGHT+500,0],
                        extrapolate: 'clamp',
                    })
                }

            ]
            }
 return (
       <Animated.View style={[{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor:this.state.color}]}>
          <Animated.View style={[{{textAlign:"center", justifyContent:"center",alignItems: "center", backgroundColor:"#fff"}]}>
             <Animated.Image source={myImage} style={[animatedStyles,{resizeMode: "contain", height: animateCardHeight, width: animateCardWidth}]}/>
          </View>
          <Animated.View
                    {... this.panResponder.panHandlers}>
          DRAWER CODE HERE.....
          </Animated.View>
       </Animated.View>
 )


}

minDrawHeight=50；//屏幕的高度就是这个值
maxDrawHeight=100//
组件willmount（）{
this.animation=new Animated.ValueXY（{x:0，y:SCREEN\u HEIGHT-this.mindrawhight}）
this.panResponder=panResponder.create({
onMoveShouldSetPanResponder:（）=>true，
onPanResponderGrant：（evt，手势状态）=>{
this.animation.extractOffset（）
},
onPanResponderMove：（evt，手势状态）=>{
控制台日志（“高度”，屏幕高度）；
/*console.log（'cdata应该是statID（%o）、moveX（%o）、moveY（%o）、x0（%o）、y（%o）、dx（%o）、dy（%o）、vs（%o）、VY（%o）'、gestureState.stateID、gestureState.moveX、，
gestureState.moveY，gestureState.x0，gestureState.y0，
gestureState.dx，gestureState.dy，gestureState.vx，gestureState.vy）*/
this.animation.setValue（{x:0，y:gestureState.dy}）
},
onPanResponderRelease：（evt，手势状态）=>{
//检查是否从可接受的最低高度下降
//如果要返回到绘图的最小高度
if（（gestureState.moveY>SCREEN_HEIGHT-this.minDrawHeight）&（gestureState.dy>0））{
console.log（'the option'，gestureState.moveY，gestureState.dy，SCREEN\u HEIGHT-this.mindrawhight）；
this.animation.flattOffset（）；
动画.spring（this.animation.y{
toValue:SCREEN_HEIGHT-this.minDrawHeight，
张力：10，
useNativeDriver：错误，
}).start（（）=>{
console.log（'新值'，this.animation.y，SCREEN\u HEIGHT-this.mindrawhight）
})
}
/*
如果您处于最低点但正在上升，则自动设置为最高点
* */
else if（（gestureState.moveYthis.maxDrawHeight）和（&（gestureState.dy>0））{
this.animation.flattOffset（）；
动画.spring（this.animation.y{
toValue:SCREEN_HEIGHT-this.minDrawHeight，
张力：80，
useNativeDriver：错误，
//弹性：12，
摩擦力：5
}).start（）
}
}
})
}
render（）{
让animateCardWidth=this.animation.y.插值({
输入范围：[this.maxDrawHeight，SCREEN\u HEIGHT-this.minDrawHeight]，
输出范围：[65175]，
外推：“夹具”
})
让animateCardHeight=this.animation.y.插值({
输入范围：[this.maxDrawHeight，SCREEN\u HEIGHT-this.minDrawHeight]，
输出范围：[65175]，
外推：“夹具”
})
常量animatedStyles={
转换：[
{
//当value==1时，将div向左移动120px
translateX:this.animation.y.插值({
输入范围：[this.maxDrawHeight，SCREEN\u HEIGHT-this.minDrawHeight]，
输出范围：[-140,0]，
//告诉动画永远不要超出输出范围
外推：“夹具”，
})
},
{
translateY:this.animation.y.插值({
输入范围：[this.maxDrawHeight，SCREEN\u HEIGHT-this.minDrawHeight]，
输出范围：[-屏幕高度+500,0]，
外推：“夹具”，
})
}
]
}
返回(
这里是抽屉代码。。。。。
)
}