React Native保持寬高比圖像ios

我有一個1242 X 450圖像，我想在1x 2x和3x設備上顯示。當前的代碼對於3個設備來說效果不錯，但是我發現圖像的邊緣會在2x設備上裁剪，並可能在1x設備上裁剪。React Native保持寬高比圖像ios

在代碼我設置寬度414和高度150（因爲1242 X 450/3×）

是否有什麼辦法可以解決這個問題？

的圖像是一個列表視圖

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

來源

2017-02-15 Yahoo

看看[react-native-scalable-image]（https://www.npmjs.com/package/react-native-scalable-image）。 –

你並不需要處理圖像的大小內。你只要正確地給與寬度和高度屬性。

導入平臺並獲取設備的寬度和高度。 https://facebook.github.io/react-native/docs/dimensions.html

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

定義圖像容器樣式

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。如果您的圖像具有較高的分辨率，而設備不是，則圖像將被壓縮，反之則會被拉伸。這兩種情況下，特別是第二次，如果圖像分辨率和圖像留下的區域之間存在很大差異，則在應用程序中會出現不良圖像視覺。爲了避免這種情況，您可以添加不同尺寸的相同圖像。

add 
└── img 
    ├── [email protected] 100x100 (resolutions are random) 
    └── [email protected] 150x150 
     [email protected] 175x175

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

如果這樣做正確的圖像會選擇自動反應。圖像根據設備的dpi來選擇。如果您的設備具有很好的分辨率，您可以獲得更大的圖像，如果圖像不是很小。除了大尺寸和低分辨率的設備（一些Android平板電腦）之外，這種情況大多適用。在這種情況下根據dpi圖像將可能是最小的圖像，所以會有不好的質量。

來源

2017-02-15 20:20:13

React Native保持寬高比圖像ios

回答

相關問題