Question

我是新手，想要在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的构建钩子，它们包含在生成的新项目中 react-native init。如果您在此之前生成了项目，那么您就可以了必须手动将它们添加到项目中才能使用新的图像资源系统。有关如何执行此操作的说明，请参阅Upgrading。

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

npm ls react-native

当前版本的版本是0.15.0。

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

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

哪里可以为Android和iOS本地存储图像？

1 个答案: