React Native 종횡비 이미지 유지 ios

Question

1x 2x 및 3x 장치에 표시하려는 1242x450 이미지가 있습니다. 현재 가지고있는 코드는 3x 장치에서 잘 작동하지만 이미지의 가장자리가 2x 장치에서 잘리고 1x 장치에서도 가능하다는 것을 알았습니다. 코드에서

나는

내가 그것을 고칠 수있는 방법이 있나요 (150) (X 450/배 1242 때문에) 414에 폭과 높이를 설정입니까?

이미지는 목록보기 당신은 이미지의 크기를 처리 할 필요가 없습니다

<View style={styles.row}> 
        <Image 
        style={styles.featureImage} 
        source={{ 
         uri: this.props.image_src 
        }}/> 
    </View> 


const styles = StyleSheet.create({ 
    row: { 
     alignItems: 'center', 
     backgroundColor: 'lightgrey', 
     flexDirection: 'row', 
     margin: 6, 
    }, 

    featureImage: { 
     height: 150, 
     width: 414 
    } 
}); 

Answer 1

안에 있습니다. width와 height 속성을 적절하게 지정하면됩니다.

가져 오기 플랫폼 및 장치의 너비와 높이를 가져옵니다.

var {scrHeight, scrwidth} = Dimensions.get('window'); 

https://facebook.github.io/react-native/docs/dimensions.html은 ','스트레칭 ','포함 '이미지 컨테이너 스타일을

imageContainer = { 
    width:scrwidth/5, 
    height:scrHeight/5, 
} 

정의 이미지 스타일을 정의하고 이미지

resizeMode 열거 ('커버 '를 resizeMode를 사용 반복 ','센터 ')

imageStyle={ 
flex:1, 
} 
<View style={styles.imageContainer }> 
    <Image style={styles.imageStyle} resizeMode={'contain'}> 
    </Image> 
</View> 

아무리 큰 이미지라도 screenWidth/5 X screenHeight/5를 커버 할 수 있습니다. 이미지의 해상도가 높고 장치가 맞지 않으면 이미지가 압축되고 반대로 압축되면 이미지가 늘어납니다. 두 경우 모두 특히 이미지 해상도와 이미지에 남겨진 영역간에 큰 차이가있는 경우 두 번째 경우 앱에 나쁜 이미지 비전이 적용됩니다. 이 상황을 피하기 위해 동일한 크기의 이미지를 다른 크기로 추가 할 수 있습니다.

https://facebook.github.io/react-native/docs/images.html

그렇게 적절한 이미지가 선택됩니다 않으면

add 
└── img 
    ├── apple@1x.png 100x100 (resolutions are random) 
    └── apple@2x.png 150x150 
     apple@3x.png 175x175 

가 자동으로 반응한다. 이미지는 장치의 dpi에 따라 선택됩니다. 장치의 해상도가 좋은 경우 작은 이미지가 아니라면 더 큰 이미지를 얻을 수 있습니다. 이 상황은 대부분 크기가 크고 해상도가 낮은 기기 (일부 안드로이드 타블렛)를 제외하고 작동합니다. 이 경우 dpi 이미지에 따르면 아마도 가장 작은 이미지 일 것이므로 품질이 좋지 않을 것입니다.