46

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

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

4

7 回答 7

45

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

只有拟议文档的屏幕截图： 在此处输入图像描述

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

于 2015-11-10T07:46:14.930 回答
31

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

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

于 2015-04-01T01:17:05.107 回答
4

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

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

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

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

于 2015-03-27T21:43:45.163 回答
3

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

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

于 2015-11-30T14:34:16.580 回答
2

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

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

于 2015-06-12T15:17:34.057 回答
1

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

项目文件夹结构

包.json

您可以通过此代码调用它。

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>
于 2017-01-20T17:10:21.873 回答
0

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

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

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

于 2017-03-10T07:16:54.600 回答