javascript-React Nati中需要图像模块出现问题

刚开始使用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>

打包并运行应用程序时,出现渲染错误:error image

我了解您需要在xcode中添加图像作为图像集,以便require调用找到该图像并为此添加了图像集:bg image

...但无济于事。 有人有什么想法吗? 我已经阅读了文档,并且似乎正在按照规定的方式进行操作。 谢谢!

7个解决方案
45 votes

从React Native版本0.14开始,图像处理已针对iOS和Android进行了规范化,现在有所不同。 除了Github上非常清晰的提交说明外,我找不到任何文档:记录新资产系统。

仅有建议文档的屏幕截图:enter image description here

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

jlapoutre answered 2020-08-09T04:00:27Z
31 votes

我遇到了类似的问题,然后使用后缀和大小写将xcode项目的source={require('image!Villagers')}目录下的文件系统中的图像文件重命名,以匹配要加载的图像。

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

McG answered 2020-08-09T04:00:52Z
4 votes

您正在运行哪个版本的React Native? 打包程序存在一个与此相关的问题已解决。

在这种情况下,您可以使用以下命令更新或运行开发服务器:

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

[HTTPS://GitHub.com/Facebook/react-native/issues/282]

tadeuzagallo answered 2020-08-09T04:01:21Z
3 votes

这个问题已经得到解答,但是如果您在Android上使用React Native,则可能会遇到同样的问题。 对我来说,解决方案是使用src/main/res/drawable而不是source={required('./bg.png')}

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

Hadrien Beaufils answered 2020-08-09T04:01:45Z
2 votes

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

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

user1813705 answered 2020-08-09T04:02:10Z
1 votes

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

项目文件夹结构

package.json

您可以通过此代码进行调用。

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>
Mikhail Gorelyshev answered 2020-08-09T04:02:43Z
0 votes

对于静态图像,您需要提供以下路径:

<Image source={require('./images/back.png')}  
style= {{width:25, height:25, marginLeft:12, padding:12}}/>

这对我有用,对于存储在项目目录的images文件夹中的图像:

Анураг Пракаш answered 2020-08-09T04:03:08Z
translate from https://stackoverflow.com:/questions/29308937/trouble-requiring-image-module-in-react-native