반응 네이티브 배경 크기 조정 배경 이미지

반응 네이티브로 회전하는 지구본 애니메이션을 만들려고합니다. 내 접근 방식은 지구본 역할을하는 원형 컨테이너 인 두 가지 구성 요소를 갖는 것입니다. 두 번째는 지구의 어린이가 될 것이며 지구를 가로 지르는 배경 이미지가 될 것입니다.반응 네이티브 배경 크기 조정 배경 이미지

배경 이미지를 전세계로 스크롤 할 수있어 꽤 좋아 보입니다.

배경 이미지가 글로브 컨테이너와 동일한 높이를 갖기를 원하지만 훨씬 더 넓어서 전세계 지구를 계속 스크롤하여 회전하는 지구 애니메이션을 만듭니다. 나는 현재 이미지가 스크롤되는 초기 뷰를 스크롤 할 때와 이미지의 나머지 부분이 손실 될 수 있도록 너비가 잘리지 않는 문제에 직면하고 있습니다.

이미지 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 
    } 
});

을 그리고 여기에 출력의 스크린 샷은 다음과 같습니다 :