Question

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

在教程开头附近，它会显示“按⌘+ R / Reload 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文件。具体来说，在＆＃34; App Transport Security＆＃34;输入，你需要设置＆＃34;允许任意负载＆＃34;到YES。但是，这只是开发的一种解决方法，不应该用于生产！您应该只从您的应用程序向HTTPS服务器发出请求。

图像意外地没有在React Native教程中呈现

1 个答案: