将图像存储在 Android 和 iOS 的原生反应中？

Question

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

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

我下面的代码产生了一个红屏错误，说“无法解析模块./images/tree.png...无效目录...”：

'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 文档页面：

可用的 React Native 0.14+。如果你已经生成了你的项目 0.13 或更早版本，请阅读此内容。新的资产系统依赖于 Xcode 和 Gradle 的构建钩子，这些钩子包含在使用生成的新项目中 反应原生初始化。如果您在此之前生成了项目，您将 必须手动将它们添加到您的项目中才能使用新的图像资产 系统。有关如何执行此操作的说明，请参阅 Upgrading。

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

npm ls react-native

当前发布版本为 0.15.0。

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

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