反應原生背景大小背景圖片

我想在原生反應中創建一個旋轉的地球動畫。我的方法是有兩個組件，第一個是可作爲地球的圓形容器。第二個將是全球的一個孩子，將成爲地球的背景圖像，將滾動視圖。反應原生背景大小背景圖片

我能夠獲得背景圖像滾動瀏覽全球，它看起來不錯。

我想讓背景圖像具有與地球容器相同的高度，但是我希望它更寬，以便它可以在全球範圍內不斷滾動，從而創建旋轉地球動畫。我目前遇到寬度被切斷的問題，這樣當圖像滾動時，它只是滾動的初始視圖，而圖像的其餘部分已經丟失。

我已經嘗試了各種各樣的東西，如玩圖像resizeModes，硬編碼高度和寬度值，並將高度和寬度設置爲undefined。

這裏是渲染我最成功的嘗試：

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 
    } 
});

這裏是輸出的屏幕截圖：