react-native:未设置宽度或高度时不显示图像
react-native:未设置宽度或高度时不显示图像
提问于 2016-12-01 20:14:37
rn版本: 0.38
只需使用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'
},
});回答 2
Stack Overflow用户
发布于 2016-12-01 21:23:28
网络图像需要您设置高度/宽度样式道具。
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'}} />Stack Overflow用户
发布于 2021-12-12 05:09:40
可以在不指定大小的情况下在Image上使用flexGrow: 1或flex: 1，但需要使用百分比或固定大小设置容器width和height：
<View style={{ width: "100%", height: "100%" }}>
<Image
source={{
uri: "https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png",
}}
style={{ flex: 1 }}
resizeMode="contain"
/>
</View>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40910421
复制相关文章
相似问题
腾讯云开发者
