Question

为什么我在移动设备上运行应用程序时不会显示图像？我只是简单地按照本教程添加了几行代码：https://facebook.github.io/react-native/docs/getting-started.html。

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 AwesomeProject extends Component {
  render() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
        <Text>{movie.title}</Text>
        <Text>{movie.year}</Text>
        <Image source={{uri: movie.posters.thumbnail}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

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

Answer 1

设置width和height属性时会出现图像。

<Image style={{width: 60, height: 60}} source={{uri: movie.posters.thumbnail}} />

Answer 2

尝试使用https代替http。这可能是主要问题。

来自未在Android中显示的网址的图片会对原生应用程

2 个答案: