Question

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

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

Answer 1

自React Native版本0.14以来，iOS和Android的图像处理已经标准化，现在已经不同了。除了关于Github的这个非常明确的提交说明之外，我找不到任何文档：Document new asset system。

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

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

Answer 2

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

例如，如果 source={require('image!Villagers')}它需要精确命名为Villagers.png，Villagers@2x.png和Villagers@3x.png的图像文件。如果＆＃39; @ 3x＆＃39;文件名的一部分不在那里，图像将无法找到。

Answer 3

您运行的是什么版本的React Native？与此相关的打包机存在问题，已经解决了。

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

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，则可能会遇到同样的问题。对我来说，解决方案是使用source={{ uri: "google", isStatic: true }}而不是source={required('./bg.png')}。

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

Answer 5

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

还要确保重新启动打包器。这解决了我的问题。

Answer 6

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

Project folder structure

package.json

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

Field('request_processed', 'boolean', default=False,
      readable=auth.has_group_membership("systemadmin"))

Answer 7

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

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

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

在React Native中需要图像模块的麻烦

7 个答案: