如何將圖像寬度設置爲100％，高度自動設置爲原生？

我想顯示滾動視圖中的圖像列表。寬度應該是100％，而高度應該是自動的，保持寬高比。如何將圖像寬度設置爲100％，高度自動設置爲原生？

我所做的搜索指出了各種解決方案，給出全屏背景風格。

const styles = StyleSheet.create({ 
    image: { 
     width: null, 
     height: 300, 
     resizeMode: 'cover' 
    } 
}); 

<ScrollView style={{flex: 1}}> 
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/> 
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/> 
</ScrollView>

我試圖寬度的各種組合：空，高度：空，撓曲：1，alignSelf等。上述溶液幾乎工作，除了高度不是動態的。部分圖像不可見。

來源

2016-09-22 Prabhakar Bhat

看一看[反應 - 本機可擴展的圖像（https://www.npmjs.com/package/react-native-scalable-image） –

"resizeMode"不是樣式屬性。應該像下面的代碼一樣移動到Image組件的Props。

const win = Dimensions.get('window'); 

const styles = StyleSheet.create({ 
    image: { 
     flex: 1, 
     alignSelf: 'stretch', 
     width: win.width, 
     height: win.height, 
    } 
}); 

... 
    <Image 
     style={styles.image} 
     resizeMode={'contain'} /* <= changed */ 
     source={require('../../../images/collection-imag2.png')} /> 
...

來源

2016-09-22 07:01:50

它是在圖像的樣式屬性，根據https://facebook.github.io/react-native/docs/image.html。將其更改爲屬性也不起作用。 –

你應該在你的問題中添加錯誤日誌。 –

您總是需要設置Image的寬度和高度。它不會爲你自動調整大小。 React Native文檔says so。

您應該使用onLayout來測量ScrollView的總高度，並根據它設置Image的高度。如果您使用的cover它將保持您的Image的縱橫比，但它顯然會裁剪它們，如果它比容器大。

來源

2016-09-22 17:23:12 rclai

自動大小調整僅適用於遠程圖像。 OP引用的是本地靜態圖像文件，用React Native _「可以自動調整尺寸，因爲它們的尺寸在安裝時立即可用。」_ – PowerOfM

所以思考了一段時間後，我能夠實現身高：自動反應原生圖像。你需要知道你的圖片的尺寸才能使這個黑客工作。只需在任何圖像查看器中打開圖像，即可在文件信息中獲取圖像的尺寸。僅供參考我使用的圖像大小爲541 X 362個

首次進口尺寸反應母語

import { Dimensions } from 'react-native';

，那麼你必須得到窗口的尺寸現在

const win = Dimensions.get('window');

計算比例爲

const ratio = win.width/541; //541 is actual image width

現在爲您的圖像添加樣式Ë作爲

imageStyle: { 
    width: win.width, 
    height: 362 * ratio, //362 is actual height of image 
}

來源

2018-02-06 19:34:10

如何將圖像寬度設置爲100％，高度自動設置爲原生？

回答

相關問題