React Native：无法加载图片

Question

我编写了一个简单的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://news.xinhuanet.com/world/2015-05/09/127782089_14311512601821n.jpg'}}
      /> 
    )
  }
}

React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

但是我收到了来自iPad屏幕的消息：

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

当我更改代码以使用图片网址

时

//source={require('image!k')}
source={{uri: 'http://news.xinhuanet.com/world/2015-05/09/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