Как изменить изображение при использовании PanResponder в React Native? - PullRequest
0 голосов
/ 25 апреля 2020

Я использую PanResponder для перемещения изображения-1. Мое требование - когда я перемещаю изображение-1 в верхнюю часть экрана, изображение-1 меняется на изображение-2. И когда я перемещаю изображение 2 в нижнюю часть экрана, изображение 2 меняется на изображение 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>
        );
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...