在 React Native 中需要图像module的问题

IT技术 javascript ios xcode reactjs react-native
2021-03-31 00:19:48

刚刚开始使用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调用找到图像并为此添加了图像集: 背景图

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

6个回答

自 React Native 发布0.14以来,iOS 和 Android 的图像处理已经标准化,现在有所不同。除了 Github 上这个非常明确的提交说明之外,我找不到任何文档:文档新资产系统

只有提议文档的屏幕截图: 在此处输入图片说明

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

2019 还是没办法用变量获取本地图片
2021-05-31 00:19:48
与其他答案相比,这个答案是最新的。
2021-06-01 00:19:48
是的,使用 React Native 0.14 为我修复了它。好一个!
2021-06-02 00:19:48
图像在开发中显示但不在生产中?我使用 react-native 0.27.2 的任何原因
2021-06-08 00:19:48
有没有办法使用变量来获取本地图像?
2021-06-20 00:19:48

我遇到了类似的问题,然后将xcode项目Images.xcassets目录下的文件系统中的图像文件重命名为后缀和大小写以匹配我正在加载的图像。

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

这对我有用。另外,不要忘记给图像指定宽度和高度,否则它不会显示。
2021-06-03 00:19:48

你在运行什么版本的 React Native?与此相关的打包程序存在问题,已解决。

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

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

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

这对我有用0.4.1我添加--assetRoots path/to/Images.xcassets到我通常的npm run start命令中,require(image!foo)现在按预期工作。
2021-06-02 00:19:48
使用0.3.1; @Pedro 关于回归是正确的。
2021-06-07 00:19:48
确认它适用于0.3.1. 我在这里遇到了另一个问题。
2021-06-11 00:19:48
似乎 pull #286 中的修复后来被提交 31c4ff0 恢复。但是手动将该修复程序带到 packager.js 似乎也没有解决问题(版本 0.3.0)。
2021-06-20 00:19:48

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

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

我正在使用 react-native 0.27.2,我们不需要进一步将图像放入 drawable 文件夹中。我只有生产 apk 有问题。有什么建议吗?
2021-06-01 00:19:48

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

还要确保重新启动打包程序。那为我解决了这个问题。

当我用更大的版本替换图像但保留相同的文件名时,重新启动打包程序对我有用。
2021-06-22 00:19:48