2017-11-25 2 views
1

Ich versuche, eine drehende Globusanimation in nativen Reaktion zu erstellen. Mein Ansatz besteht darin, zwei Komponenten zu haben, wobei die erste ein kreisförmiger Behälter ist, der als Globus fungiert. Die zweite wird ein Kind der Welt sein und wird ein Hintergrundbild der Erde sein, die über die Ansicht scrollen wird.React Native Hintergrund Sizing Hintergrundbild

Ich kann das Hintergrundbild über den Globus scrollen und es sieht ziemlich gut aus.

Ich möchte, dass das Hintergrundbild die gleiche Höhe wie der Globuscontainer hat, aber ich möchte, dass es viel breiter ist, so dass es kontinuierlich über den Globus scrollt und eine sich drehende Erdanimation erzeugt. Ich stoße zur Zeit auf das Problem, dass die Breite abgeschnitten wird, so dass, wenn das Bild scrollt, nur die anfängliche Ansicht scrollt und der Rest des Bildes verloren gegangen ist.

Ich habe eine Vielzahl von Dingen versucht, wie zum Beispiel mit den Bildern resizeModes herumspielen, Höhen- und Breitenwerte fest codieren und Höhen und Breiten auf undefiniert setzen.

Hier ist die machen für meine erfolgreichste Versuch:

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

Und hier sind Screenshots der Ausgabe:

enter image description here

enter image description here

Wer noch Gedanken dazu?

Antwort

1

Ich habe es herausgefunden. Erforderlich, um das Bild als absolut zu positionieren.

Verwandte Themen