在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调用来查找图像，并添加了一个图像设置为此：

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

Answer 1

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

只有build议的文档的屏幕截图：

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

项目文件夹结构

的package.json

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

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

Answer 7

对于静态图像，您需要提供如下path：

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

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