javascript - 图片在 React Native 教程中意外不呈现

Question

我正在研究 http://facebook.github.io/react-native/releases/0.25/docs/tutorial.html .我的目标只是让它在 iPhone 上运行，而不是在 Android 上运行。

在教程开头附近，它说“按 ⌘+R/重新加载 JS，图像现在应该呈现。”，但我的图像根本没有呈现。但是，电影 title 和 year 会渲染。

图像确实在浏览器中加载:http://i.imgur.com/UePbdph.jpg

密码在https://bitbucket.org/codyc54321/tutorials/src/a5d5b3ea34c965475c2ba6bb035e21238e1eb9f3/mobile/react_native/official_tutorial/index.ios.js?at=master&fileviewer=file-view-default

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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


var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

export default class official_tutorial extends Component {

    render() {
        var movie = MOCKED_MOVIES_DATA[0];
        return (
            <View style={styles.container}>
            <Image
                source={{uri: movie.posters.thumbnail}}
                style={styles.thumbnail}
            />
            <View style={styles.rightContainer}>
              <Text style={styles.title}>{movie.title}</Text>
              <Text style={styles.year}>{movie.year}</Text>
            </View>
          </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  rightContainer: {
    flex: 1,
  },
  thumbnail: {
      width: 53,
      height: 81,
  },
});

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

ios/official_tutorial/Info.pslist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>official_tutorial</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>NSAppTransportSecurity</key>
    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
</dict>
</plist>

为什么这张图片无法在我的 xcode 模拟器中呈现？

Answer 1

新 XCode 项目的默认设置是阻止所有非 HTTPS 请求。因此，如果您尝试在新创建的项目中通过 HTTP URL 获取图片，则不会加载图片，因为对图片的请求会被 iOS 阻止。

解决此问题的正确方法是仅发出 HTTPS 请求。由于您从支持 HTTPS 的 Imgur 获取图像，因此只需将 URI 中的 http:// 更改为 https:// 即可。

如果出于某种原因您确实需要向仅支持 HTTP 的服务器发出请求，您可以在 XCode 中为您的项目编辑 Info.plist 文件。具体来说，在“App Transport Security”条目下，您需要将“Allows Arbitrary Loads”设置为YES。但是，这只是开发的一种解决方法，不应在生产中使用!您应该只从您的应用向 HTTPS 服务器发出请求。