Question

版本：0.38

只使用flex指定图像样式，没有宽度和高度，但Image不会在移动屏幕上显示。怎么做。

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

Answer 1

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

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

react-native：未设置宽度或高度时图像不显示

1 个答案: