【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' 
    }, 
});

来源

2016-12-01 youhan26

尝试'图像：{挠曲：1，宽度：空，高度：空}'样式。 – zvona

网络图像要求您设置高度/宽度样式道具。

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'}} />

来源

2016-12-01 13:23:27

是的，谢谢。但如何实现Pinterest的布局？1。如何获得父元素的宽度不是窗口？ 2.如何在使用'resizeMode'保留图库后删除空格？非常感谢 – youhan26

您可以使用[Dimensions]（https://facebook.github.io/react-native/docs/dimensions.html）API获取窗口高度/宽度，并根据多少行/单元格等手动计算图像大小。 –

【RN】图像不显示时没有设置宽度或高度

回答

相关问题