react-native - 将图像存储在 Android 和 iOS 的原生 react 中？

Question

我是 native react 的新手，想在 Android 和 iOS 中构建一个小型测试应用程序。

我在 index.ios.js 和 index.android.js 文件旁边创建了一个图像目录。

我下面的代码会产生一个红屏错误，说“无法解析模块 ./images/tree.png... Invalid directory...”:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} = React;

var TestApp = React.createClass({

  render: function() {

    return (
      <View>
        <Text>test app</Text>
        <Image 
          style={styles.thumbnail}
          source={require('./images/tree.png')} /> />
      </View>
    );
  },
});

var styles = StyleSheet.create({
  thumbnail: {
    width: 100,
    height: 100,
  },
});

AppRegistry.registerComponent('TestApp', () => TestApp);

我应该把我的图片放在哪里，我应该如何引用它们？

Answer 1

假设 images 你的代码看起来是正确的目录与 index.*.js 位于同一位置文件。

你有什么版本的 React Native？来自 Images文档页面:

Available React Native 0.14+. If you've generated your project with 0.13 or earlier, read this. The new asset system relies on build hooks for Xcode and Gradle that are included in new projects generated with react-native init. If you generated your projects before that, you'll have to manually add them to your projects to use the new images asset system. See Upgrading for instructions on how to do this.

如果你想验证你的 react-native 版本，最简单的方法是运行以下 npm项目目录中的命令:

npm ls react-native

当前的发布版本是 0.15.0。

确保不要忘记运行 react-native upgrade更新包后，因为这是将新 Assets 系统的构建 Hook 添加到现有项目所必需的。如果您之前没有这样做就更新了 react-native 版本，这可能解释了您遇到的问题。

如果您碰巧使用 Windows 进行开发，请参阅我的 answer to this question有关如何解决 Windows 上新 Assets 系统的错误的详细信息。