反应原生背景大小背景图片

问题描述：

我想在原生反应中创建一个旋转的地球动画。我的方法是有两个组件，第一个是可作为地球的圆形容器。第二个将是全球的一个孩子，将成为地球的背景图像，将滚动视图。反应原生背景大小背景图片

我能够获得背景图像滚动浏览全球，它看起来不错。

我想让背景图像具有与地球容器相同的高度，但是我希望它更宽，以便它可以在全球范围内不断滚动，从而创建旋转地球动画。我目前遇到宽度被切断的问题，这样当图像滚动时，它只是滚动的初始视图，而图像的其余部分已经丢失。

我已经尝试了各种各样的东西，如玩图像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 
    } 
});

这里是输出的屏幕截图：

任何人有这样的想法？

答

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

反应原生背景大小背景图片

相关推荐