Question

当我使用命令react-native run-ios运行此代码（非常类似于此处的代码https://facebook.github.io/react-native/docs/image.html）时，不会出现图像head_logo.png图像。如何显示此图像？

import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);

Answer 1

这是因为您使用白色图像而背景为白色

只需将backgroundColor:'#000'应用于<View>

即可

Answer 2

它确实出现，它只是白色，背景透明。尝试在根<View>

中添加红色背景

在这里看到这个小吃，它就像一个魅力

https://snack.expo.io/By6iSVCeM

Answer 3

显示您的图像，但图像颜色与背景颜色相同。所以它在视图中没有正确显示。

因此，您可以为图像或视图提供背景颜色。所以它可以正确显示。

<Image
          style={{width: 50, height: 50, backgroundColor: 'grey', resizeMode: 'center'}}
          source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
/>

使用带https的图像

3 个答案: