在React Native中需要图像模块的麻烦 [英] Trouble requiring image module in React Native

问题描述

刚开始使用。

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

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

Just getting started with React-Native and I'm having some trouble requiring a static image.

Here's the very-basic code I have so far:

'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);

The main trouble area is:

    <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>

When packaging my app and running it, I get a render error:

I understand that you need to add images in xcode as an image set in order for the require call to find the image and have added an image set to that end:

...But to no avail. Anyone have any thoughts? I've read the docs and seem to be doing this in the prescribed way. Thanks!

解决方案

Since React Native release 0.14 the handling of images has been normalized for iOS and Android and is now different. I could not find any documentation except for this very clear commit note on Github: Document new asset system.

There's only a screenshot of the proposed documentation:

Update: There is a link now for the real documentation: https://facebook.github.io/react-native/docs/images.html

这篇关于在React Native中需要图像模块的麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！