在React Native中使用PanResponder时如何更改图像?

时间:2020-04-25 13:38:31

标签: react-native

我正在使用PanResponder移动图像1。我的要求是,当我将image-1移到屏幕顶部时,image-1变为image-2。然后,当我将image-2移到屏幕底部时,image-2变为image-1。

我不知道那个@@

感谢帮助!

class ShowEat extends Component {
    pan = new Animated.ValueXY();

    isCheck = false

    panResponder = PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderGrant: () => {
            this.pan.setOffset({
                x: this.pan.x._value,
                y: this.pan.y._value
            });
        },

        onPanResponderMove: Animated.event([
            null,
            { dx: this.pan.x, dy: this.pan.y }
        ]),
        onPanResponderRelease: () => {
            this.pan.flattenOffset();
            if (this.pan.y < -290) {
                this.isCheck = true
            }
        }
    });

    render() {
        return (
            <View style={styles.container}>
                <Animated.View
                    style={{
                        transform: [{ translateX: this.pan.x }, { translateY: this.pan.y }]
                    }}
                    {...this.panResponder.panHandlers}
                >
                    {this.isCheck ? (
                        <Image
                            source={require("../assets/img/Pho/image-1.png")}
                            style={{
                                width: 100,
                                height: 100,

                            }}
                            resizeMode="contain"
                        />
                    ) : (
                            <Image
                                source={require("../assets/img/Pho/image-2.png")}
                                style={{
                                    width: 100,
                                    height: 100,

                                }}
                                resizeMode="contain"
                            />
                        )}

                </Animated.View>
            </View>
        );
    }
}

0 个答案:

没有答案