Question

我正在修改React Native，并尝试使用URL中的图像库来显示图像。当我运行它时，显示的所有内容都是“反应原生”和＃39;文字，但没有图像。我做错了什么？

'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

尝试给出图像组件h和w

<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

当我们在本机图像中使用图像时，默认情况下图像将不会扩展以填充可用的空间，相反，我们必须添加样式规则，即图像应为多大。如果您不为高度图像添加样式和宽度您无法显示图片

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

4 个答案: