时间戳

首页 > 解决方案 > 如何将@2x @3x 图像集成到 React Native 项目（Android 和 IOS）？

android - 如何将@2x @3x 图像集成到 React Native 项目（Android 和 IOS）？

问题描述

我已将相同图像的版本 (@2x @3x) 添加到 src>asssets 以在所有设备上运行我们的平台。这就是问题所在，VSCode 只识别即 path.png（它不识别@2x 和@3x）。我们该如何处理这个问题？

标签： androidreactjsimagereact-nativeresolution

解决方案

React Native 会自动从 3 个可用选项（即1x、2x、3x）中选择所需的图像 。我们只需要提供基本图像的文件名。

例子

.
├── button.js
└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png

因此，如上所述，当您必须使用检查图像时，只需提供 check.png 的图像路径，其余的将根据设备屏幕密度由 android 和 ios 设备的 react native 自动处理。
像下面一样使用图像，一切都像魅力一样。

<Image source={require('./img/check.png')} />

您可以在此处阅读更多有关来自 react native 官方文档的图像的信息。

我希望这会有所帮助....谢谢:)

推荐阅读