React本机背景大小调整背景图像

Question

我正在尝试在react原生中创建一个旋转的地球动画。我的方法是有两个组件，第一个是一个圆形容器，它将充当globe。第二个将是地球的孩子，并将是地球的背景图像，将在视图中滚动。

我能够让背景图像在全球范围内滚动，它看起来相当不错。

我希望背景图像具有与globe容器相同的高度，但我希望它更宽，以便它在地球上不断滚动，创建旋转的地球动画。

我尝试了各种方法，比如处理图像的resizeModes，硬编码高度和宽度值，以及将高度和宽度设置为未定义。

下面是我最成功的尝试的呈现：

render() {
  const { animatedRotate } = this.state;
  const scroll = animatedRotate.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 200]
  });

  return (
    <View style={styles.globeContainer}>
      <Animated.Image
        source={ require('../resources/world.png') }
        //resizeMode="cover"
        //resizeMode="center"
        //resiveMode=""
        style={[styles.globe, {transform: [{translateX: scroll}]}]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  globeContainer: {
    height: 150,
    width: 150,
    borderRadius: 75,
    backgroundColor: '#f0f0f5',
    overflow: 'visible', //visible for testing only
    borderWidth: 0.5,
    borderColor: '#D3D3D3',
    borderRightColor: '#D3D3D3',
    borderRightWidth: 10,
    alignSelf: 'center',
  },
  globe: {
    height: 150,
    width: undefined
  }
});

下面是输出的截图：

​

​

​

​

有人对此有什么想法吗？

Answer 1

我想通了。需要将图像定位为绝对图像。