React Native 应用程序无法将 @1x、@2x 或 @3x 图像加载到正确的屏幕密度答案

【问题标题】：React Native app doesn't load @1x, @2x or @3x image to the right screen densityReact Native 应用程序无法将 @1x、@2x 或 @3x 图像加载到正确的屏幕密度
【发布时间】：2019-02-27 19:27:16
【问题描述】：

我正在使用 React Native 开发 iOS/Android 应用程序。根据此链接上的文档https://facebook.github.io/react-native/docs/images React Native 会根据您的设备屏幕密度放置正确的图像尺寸。

在开发时，我按照上面链接中的教程进行操作，但总是对原生 bundle de img.png 做出反应，并且不会放置更大的 @2x 或 @3x 图像。

我不知道这是否仅在为启动应用程序创建捆绑包时才完成！请帮忙，我很挣扎

另外，在 psd 中设计一种屏幕尺寸并从中获取适用于多种屏幕尺寸的所有资源，哪个是更好的通量、流程或方式？

提前致谢

【问题讨论】：

例如，我在 iphone 6s plus 中导出了 adobe XD 制作的形状，然后以 3x 设计的 1x、2x 和 3x 导出。然后将这些图像放入本机反应并不起作用。我是不是从 react native 导出错误？

标签： ios react-native mobile responsive-design

【解决方案1】：

作为 react-native 文档图像应相应命名

在开发模式下，图像将被捆绑到应用程序，但您可以将原生项目文件夹中的图像链接为 android 中的drawable
因此，如果您为您的应用程序使用不同的构建，您将使用该密度图像

ps：为了在开发模式下测试您的应用，一个肮脏的解决方法是为@2x 或@3x 图像大小提供其他图像

【讨论】：

是的，我在 Xcode 中为 iOS 链接图像，然后为 Android 链接。我有相同的文件结构，它不会加载我想在屏幕上查看的图像
它会在没有@2x 的情况下加载图像
我按照你告诉我的对@2x 使用另一个图像进行了操作，它可以工作，但是不同尺寸的图像看起来不一样，我为@x 使用了不同颜色的形状进行测试

【解决方案2】：

我遇到了同样的问题 - 将 @2x 和 @3x 添加到项目后，当我在具有这些屏幕密度的手机上编译和运行我的应用程序时，没有加载它们。

但是当我停止并关闭捆绑程序（终端）并重新启动它（新终端窗口）时，它会打包并在正确设备的屏幕上显示正确的密度图像。

【讨论】：