带有PanResponder的动画。图像反应原生

Question

我在Animated.Image内使用scrollView。我将responder应用于Animated.Image。

问题：当我移动图像很远的距离时，它会消失。

问题：当我移动它时，如何调整Animated.Image以保持在特定的边界内？

我的代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Animated,
    PanResponder,
    ScrollView
} from 'react-native';
var xPosition, yPosition;
var position;
export default class AvatarEditor extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pan: new Animated.ValueXY(), // inits to zero
            image: this.props.image,
            border: this.props.border,
            width: this.props.width,
            height: this.props.height,
            viewWidth: this.props.width + 2 * this.props.border,
            viewHeight: this.props.height + 2 * this.props.border,
            first: true,
            left: 0,
            top: 0,
            xPosition: 0,
            yPosition: 0,
            translateX: 0,
            translateY: 0
        };
    }

    componentWillMount() {
        this._animatedValueX = 0;
        this._animatedValueY = 0;
        this.state.pan.x.addListener((value) => this._animatedValueX = value.value);
        this.state.pan.y.addListener((value) => this._animatedValueY = value.value);
        this._panResponder = PanResponder.create({
            onMoveShouldSetResponderCapture: () => true, //Tell iOS that we are allowing the movement
            onMoveShouldSetPanResponderCapture: () => true, // Same here, tell iOS that we allow dragging
            onPanResponderGrant: (e, gestureState) => {
                this.state.pan.setOffset({ x: this._animatedValueX, y: this._animatedValueY });
                this.state.pan.setValue({ x: 0, y: 0 }); //Initial value
            },
            onPanResponderMove: (evt, gestureState) => {
                // Animated.event([
                //     null, { dx: this.state.pan.x, dy: this.state.pan.y }
                // ]) // Creates a function to handle the movement and set offsets

                newdx = gestureState.dx;
                newdy = gestureState.dy;
                Animated.event([
                    null, { dx: this.state.pan.x, dy: this.state.pan.y },
                ])(evt, { dx: newdx, dy: newdy });

            },
            onPanResponderRelease: () => {
                this.state.pan.flattenOffset(); // Flatten the offset so it resets the default positioning
            }
        });
    }
    componentDidMount() {

    }

    componentWillUnmount() {
        this.state.pan.x.removeAllListeners();
        this.state.pan.y.removeAllListeners();
    }

    render() {

        var imageStyle = {
            width: this.state.width,
            height: this.state.height,
            resizeMode: 'stretch',
            top: this.state.top,
            left: this.state.left,
            transform: [
                { translateX: this.state.pan.x },//this.state.pan.x
                { translateY: this.state.pan.y },
                { scale: this.props.scale }
            ]
        };
        return (
            <View
                style={[this.props.style, { backgroundColor: 'gray' }]}
                >
                <ScrollView
                    style={{
                        width: this.state.viewWidth,
                        height: this.state.viewHeight,
                        borderWidth: this.state.border,
                        borderColor: 'rgba(100, 100, 100, 0.5)',
                        overflow: 'hidden',
                    }}
                    scrollEnabled={false}
                    >
                    <Animated.Image
                        style={imageStyle}
                        source={{ uri: this.state.image }}
                        {...this._panResponder.panHandlers}
                        >
                    </Animated.Image>
                </ScrollView>
            </View>
        );
    }
}

AvatarEditor.propTypes = {
    scale: React.PropTypes.number,
    image: React.PropTypes.string,
    border: React.PropTypes.number,
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    style: React.PropTypes.object
};

AvatarEditor.defaultProps = {
    scale: 1,
    border: 25,
    width: 200,
    height: 200,
    style: {
        top: 50,
        left: 25,
        position: 'absolute',
    },
    image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQesv5ucRQ1KUNtDipnrhS6Gn9yMn7GOqFdQGTeLMG1fCKGvudEUji_Aw',
};