Question

我正在尝试在我的反应原生项目中使用一些图像。

我的项目具有以下结构：

./index.android.js

./images/icon.png

我正在尝试在index.android.js中的视图中加载图像：

<View>
        <Image
          source={require('./images/icon.png')}
          style={styles.icon}
        />
</View>

我知道找到了图像，因为我没有收到任何错误（如果我尝试要求不存在的图像）。但是，图像没有加载，而且图像应该是一个空盒子。

我做错了什么？我正在使用react-native 0.15.0，使用移动设备进行测试。

更新

所以我在我的app的build.gradle文件中找到了这个：

 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",

我的图片不在该文件夹中。我想那是问题吗？

Answer 1

你在运行Windows吗？我遇到了这个完全相同的问题，结果证明packager/react-packager/src/Bundler/index.js中的错误是如何生成资产URL路径的。它使用path模块将本地文件路径转换为URL路径，但path模块返回具有本机路径分隔符的路径。在Windows上，由于路径具有反斜杠而不是斜杠，因此最终会出现无效的URL路径。对此的快速解决方法是用斜杠替换反斜杠。

请参阅拉取请求中的文件差异以获取详细信息。

https://github.com/facebook/react-native/pull/4416/files

更新：我的拉取请求已被接受并以0.17版本发布。

反应原生相对图像路径加载

1 个答案: