反应本机相对图像路径加载

debugcn 发表于 Dev

Xtrinch

我正在尝试在我的本机项目中使用一些图像。

我的项目具有以下结构：

./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",

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

大卫·安德森（David Anderson）

您在运行Windows吗？我碰到了这个完全相同的问题，事实证明这是packager/react-packager/src/Bundler/index.js如何生成资产URL路径的错误。它使用path模块将本地文件路径转换为URL路径，但是该path模块返回带有本机路径分隔符的路径。在Windows上，由于路径具有反斜杠（而不是斜杠）而最终导致无效的URL路径。快速解决方案是用斜杠替换反斜杠。

有关详细信息，请参见我的请求中的文件diff。

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

更新：我的请求请求已被接受，并随版本0.17一起发布。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。