リアクションネイティブのバックグラウンドサイジングの背景画像

私はリアクションネイティブで回転する地球儀アニメーションを作成しようとしています。私のアプローチは、2つのコンポーネントを持つことです。最初はグローブとして動作する円形のコンテナです。 2番目は地球の子供になり、視界全体をスクロールする地球の背景画像になります。リアクションネイティブのバックグラウンドサイジングの背景画像

私はバックグラウンド画像を世界中にスクロールさせることができました。

グローブコンテナと同じ高さにすることを願っていますが、世界全体にわたって連続的にスクロールして回転する地球アニメーションを作成するためには、それをはるかに広くしたいと考えています。私は現在、画像がスクロールしている最初のビューをスクロールし、残りの画像が失われるように、幅がカットされているという問題に直面しています。

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

そして、ここにあるスクリーンショット：