无法使用带有 uri 的 React Native 显示图像

Question

我正在研究 React Native，并尝试使用 URL 中的图像库简单地显示图像。当我运行这个时，显示的只是 'React Native' 文本，但没有图像。我做错了什么？

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Image,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          React Native
        </Text>
        <Image 
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
        />
      </View>
    );
  }
});

Answer 1

尝试为图像组件指定高度和宽度值。

<Image style= {{ height:50, width: 50 }} >

Answer 2

flex: 1,
width: null,
height: null,
resizeMode: 'cover',

这种风格将使图像灵活并覆盖整个容器

Answer 3

在 iOS 中，您无法接收 http 请求，只能接收 https。尝试将此添加到 xcode 中的 info.plist 文件（确保它完全按照此顺序）：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>example.com</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

Answer 4

当我们在 react-native 中使用图像时，默认情况下图像不会扩展以填充它可用的 space，而是我们必须添加图像应该有多大的样式规则 be.if您没有为具有高度和宽度的图像添加样式您无法显示图像

无法使用带有 uri 的 React Native 显示图像

Unable to display image with React Native with uri

javascript

react-native