Image 反应本机背景调整背景图像大小
我正在尝试用react native创建旋转地球动画。我的方法是有两个组件,第一个是一个圆形容器,充当地球仪。第二个将是地球的孩子,是地球的背景图像,将在视图中滚动 我可以让背景图像在全球范围内滚动,看起来很不错 我希望背景图像具有与地球容器相同的高度,但我希望它更宽,以便在地球上连续滚动,创建旋转地球动画。我目前遇到的问题是,宽度被切断,因此当图像滚动时,它只是滚动的初始视图,而图像的其余部分已丢失 我已经尝试了各种各样的方法,比如使用图像大小调整模型,硬编码高度和宽度值,以及将高度和宽度设置为未定义 以下是我最成功尝试的渲染:Image 反应本机背景调整背景图像大小,image,react-native,react-native-image,Image,React Native,React Native Image,我正在尝试用react native创建旋转地球动画。我的方法是有两个组件,第一个是一个圆形容器,充当地球仪。第二个将是地球的孩子,是地球的背景图像,将在视图中滚动 我可以让背景图像在全球范围内滚动,看起来很不错 我希望背景图像具有与地球容器相同的高度,但我希望它更宽,以便在地球上连续滚动,创建旋转地球动画。我目前遇到的问题是,宽度被切断,因此当图像滚动时,它只是滚动的初始视图,而图像的其余部分已丢失 我已经尝试了各种各样的方法,比如使用图像大小调整模型,硬编码高度和宽度值,以及将高度和宽度设置
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
}
});
render(){
const{animatedRotate}=this.state;
常量滚动=animatedRotate.interpolate({
输入范围:[0,1],
输出范围:[1200]
});
返回(
有人对此有想法吗?找到了答案。需要将图像定位为绝对图像