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

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>

打包我的应用程序并运行它时,我收到渲染错误:

我知道您需要在xcode中添加图像作为图像集,以便require调用查找图像并为此添加图像集:

......但无济于事.有人有什么想法？我已经阅读了文档,似乎是以规定的方式做到这一点.谢谢!

Answer 1

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

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

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

Answer 2

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

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