我正在尝试制作标准的React-native图像动画以使其可拖动，此外，它还可以通过某些动作在屏幕上移动。该图像位于已设置视框和宽度的父SVG容器内部，未设置高度，因此它会填充父容器。

ParentContainer.js ...

    <React.Fragment>
      <Svg
        width={width}
        viewBox={`0 0 1247 539`}
        preserveAspectRatio="xMidYMid slice"
      >
        <G>
            // a lot of inline svg...
            <AnimatedImage/>
        </G>
      </Svg>
    </React.Fragment>

AnimatedImage.js ...

import { Image,Animated } from 'react-native'
...
      // a lot of stuff

     const panStyle = {
      left: shouldmove
        ? this.state.location.x.interpolate({
            inputRange: [0,10],outputRange: [x,cx],})
        : 0,top: shouldmove
        ? this.state.location.y.interpolate({
            inputRange: [0,outputRange: [y,cy],transform: running ? [] : this.state.pan.getTranslateTransform(),}

      <Animated.View style={[panStyle]} {...this.panResponder.panHandlers}>
        <Image
          id={id}
          style={{
            width: width,height: height,}}
          source={src}
        />
      </Animated.View>
// Pan and location are both animated values,location handles automatic movement,pan handles dragging

该动画视图以大约60FPS的速度处理动画运动和拖动

顶部和左侧（x，cx，y，cy）的值是常数。在实施动画之前，我们有react-native-svg个图像而不是普通的RN图像，并且我们使用x和y属性来设置图像的位置。这些设备会根据父级SVG大小自动转​​换其位置，因此即使x和y保持不变，无论设备大小如何，它们看起来都还不错

在实现了整个动画集之后，我们别无选择（我们知道），只能将它们包装在Animated.View中，然后将样式和转换输入到视图样式中。我们将SVG图片替换为常规图片，因为它对我们的眼睛没有影响。

更改后，图片不再使用其父级SVG转换其位置，因此在不同屏幕尺寸上打开该应用程序最终会在整个地方抛出图片

我尝试用不带x / y道具的Animated View包裹...-svg图像组件，但无法渲染，尝试将top / left / transforms输入到组件的x / y道具，但性能降低了很多。

我如何保持可拖动的运动图像在SVG父对象中保持恒定位置？

如果您需要更多信息，请告诉我，这很难解释。