在React Native中需要镜像模块时遇到问题

刚刚开始使用React-Native ,我遇到了一些需要静态图像的麻烦。

以下是我迄今为止的基本代码:

'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var buzz = React.createClass({ render: function() { return ( <View style={styles.container}> <Image source={require('image!bg')} style={styles.bg}> <Text style={styles.welcome}> Welcome to Buzz! iOS interface to </Text> <Text style={styles.welcomeHeader}>Charityware</Text> </Image> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent' }, welcomeHeader: { fontWeight: '600', fontFamily: 'Helvetica', color: '#fff', fontSize: 50, alignSelf: 'center' }, bg: { width: 400, height: 300, alignSelf: 'auto', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', }, }); AppRegistry.registerComponent('buzz', () => buzz); 

主要的麻烦领域是:

  <Image source={require('image!bg')} style={styles.bg}> <Text style={styles.welcome}> Welcome to Buzz! iOS interface to </Text> <Text style={styles.welcomeHeader}>Charityware</Text> </Image> 

打包我的应用程序并运行时,出现渲染错误: 错误图像

我知道你需要在xcode中添加图像作为一个图像集,以便进行require调用来查找图像,并添加了一个图像设置为此: BG图像

…但无济于事。 任何人有任何想法? 我已经阅读了文档, 似乎是以规定的方式来做这件事。 谢谢!

由于React Native发布了0.14版本,图像的处理已经在iOS和Android上进行了标准化,现在已经不同了。 我找不到任何文档,除了Github上非常明确的提交说明: logging新的资产系统 。

只有build议的文档的屏幕截图: 在这里输入图像说明

更新:现在有一个链接的真实文档: https : //facebook.github.io/react-native/docs/images.html

我有类似的问题,然后重命名文件系统下的图像文件在xcode项目的Images.xcassets目录后缀和大小匹配我加载的图像。

例如,如果source={require('image!Villagers')}它需要精确地命名为Villagers.pngVillagers@2x.pngVillagers@3x.png的图像文件。 如果文件名的“@ 3x”部分不存在,图像将无法find。

你运行的是什么版本的React Native? 包装商有一个问题,与此相关,已经解决了。

如果是这种情况,您可以更新或运行dev服务器:

 node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets 

https://github.com/facebook/react-native/issues/282

这个问题已经被回答,但是如果你在Android上使用React Native,你可能会遇到同样的问题。 对我来说,解决scheme是使用source={{ uri: "google", isStatic: true }}而不是source={required('./bg.png')}

只要不要忘记在src/main/res/drawable文件夹中添加图像。

注意:新资源需要构build应用程序每次向Images.xcassets添加新资源时,您都需要通过XCode重新构build应用程序,然后才能使用它 – 模拟器中的重新加载是不够的。 (来自React Native文档https://facebook.github.io/react-native/docs/image.html#content

另外请确保重新启动打包程序。 这解决了我的问题。

您可以通过在资产文件夹中生成package.json文件来轻松地引用图像。

项目文件夹结构

的package.json

你可以通过这个代码来调用它。

 <Image source={require('assets/img/avatar.png')} style={styles.itemAvatar} resizeMode={'cover'} /> 

对于静态图像,您需要提供如下path:

 <Image source={require('.http://img.dovov.comback.png')} style= {{width:25, height:25, marginLeft:12, padding:12}}/> 

这对我来说,工程目录的图像文件夹中存储的图像: