2016-12-01 114 views
0

RN版本:0.38【RN】圖像不顯示時沒有設置寬度或高度

只是使用Flex,沒有寬度和高度指定的影像風格,但圖像不會移動屏幕上顯示。這個怎麼做。

<View style={styles.container}> 
    <Image style={styles.image} source={{uri : 'https://www.baidu.com/img/bd_logo1.png'}}> 
    </Image> 
</View> 



const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    image: { 
    flex: 1, 
    resizeMode: 'contain' 
    }, 
}); 
+0

嘗試'圖像:{撓曲:1,寬度:空,高度:空}'樣式。 – zvona

回答

0

網絡圖像要求您設置高度/寬度樣式道具。

React Native Documentation

很多,你會在你的應用程序顯示的圖像也不會在編譯時可用 ,或者你會想加載一些動態保持 二進制大小下來。 與靜態資源不同,您將需要 手動指定圖像的尺寸。

// GOOD 
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
     style={{width: 400, height: 400}} /> 

// BAD 
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} /> 
+0

是的,謝謝。但如何實現Pinterest的佈局?1。如何獲得父元素的寬度不是窗口? 2.如何在使用'resizeMode'保留圖庫後刪除空格?非常感謝 – youhan26

+0

您可以使用[Dimensions](https://facebook.github.io/react-native/docs/dimensions.html)API獲取窗口高度/寬度,並根據多少行/單元格等手動計算圖像大小。 –

相關問題