有人成功使用本地图像对 Android 做出原生反应吗？

Question

我正在使用 react native 0.14.2。我在github 上问了这个问题，但是那个 repo 被太多的问题压倒了。希望我能在这里找到答案。

所以这里是项目结构：

android-project
+---app
|   \---src
|       \---main
|           \---assets
|           \---java
|           \---res
+---reactnative
|   \---assets
|       \---image@1x.png
|       \---image@2x.png
|       \---image@3x.png
----index.android.js

这是显示图像的代码：

<Image
    source={require('./reactnative/assets/image.png')}
    resizeMode='contain'
    style={styles.image} />

上面的代码在与 localhost react-native start 一起运行时可以正常工作。但是将 react 原生资源打包到 apk 后就不行了：

react-native bundle --platform android -dev false --entry-file index.android.js \
--bundle-output app/src/main/assets/index.android.bundle \
--assets-dest app/src/main/res/

这是输出：

android-project
+---app
|   \---src
|       \---main
|           \---assets
|               \---index.android.bundle
|           \---java
|           \---res
|               \---drawable-xxxhdpi
|                   \---reactnative_assets_image1.png
|               \---drawable-xxhdpi
|                   \---reactnative_assets_image1.png
|               \---drawable-xhdpi
|                   \---reactnative_assets_image1.png
|               \---drawable-mdpi
|                   \---reactnative_assets_image1.png

使用 react native 生成​​ apk 的方法是否正确？请排除故障。谢谢！

Answer 1

在标准 JS 中使用 require() 时，给出的路径是相对的，因此任何给出的路径都需要与您需要它们的文件相关。最好的方法是不要将它们放在 ' android' 和 'ios' 目录，但有一个单独的目录，其中包含您的应用程序 JS 代码，并将图像存储在其中，这样路径会更短，并且每个操作系统不会有所不同。

Answer 2

您可能想查看访问 https://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-android-app 进行查询，基本上您使用 JS 文件设置您的代码，如 <Image source={require('./ res/check.png')} /> 并将您的图像放在可绘制文件夹中，例如 check.png in android/app/src/main/res/drawable-hdpi