React Native 中响应图像的分辨率（在 phone 和平板电脑上不模糊）

Question

我想在背景中以设备宽度的 80% 显示方形图像。目前，我正在开发一个标准 phone (MDPI) 所以从这个页面： https://developer.android.com/training/multiscreen/screendensities 我有一个 160dpi phone，我想要我的图像大约 2 英寸，我的图像应该有 320x320 像素的分辨率。然后图像@2x 640px 和@3x 960px。目前，我理解正确吗？

但是如果我拿大一点的phone，80%的宽度可能是2.5英寸，我的图片就不够大了。更糟糕的是，80% 的平板电脑代表着更大的尺寸。在本页面： https://developer.android.com/training/multiscreen/screensizes 我知道他们解释了每个屏幕尺寸所需的尺寸：

res/layout/main_activity.xml           # For handsets (smaller than 640dp x 480dp)
res/layout-large/main_activity.xml     # For small tablets (640dp x 480dp and bigger)
res/layout-xlarge/main_activity.xml    # For large tablets (960dp x 720dp and bigger)

所以我应该使用这个吗？但是是Android具体的开发，react-native中存在吗？如果不是，我是否应该不再使用@2x 和@3x 图像？或者我应该这样做：

res/layout/main_activity.xml           # For handsets (smaller than 640dp x 480dp)
res/layout/main_activity@2x.xml
res/layout/main_activity@3x.xml
res/layout-large/main_activity.xml     # For small tablets (640dp x 480dp and bigger)
res/layout-large/main_activity@2.xml  
res/layout-large/main_activity@3.xml 
...

对于此特定图像，它是 .svg 格式。我看到我可以从 android studio 的 .xml 转换它并用 svg 库打开它？这是最好的选择吗？（我对前面问题的答案仍然很感兴趣，我不确定我是否只有 .svg 文件）

最后，当我们使用 3 种图像格式（icon.png、icon@2x.png 和 icon@3x.png）时，它们都在最终的 apk 中吗？如果是这样，为什么不直接使用较大的格式并将其缩小以用于较小密度的屏幕？

本来以为这些问题问的一定很频繁，却找不到明确的答案...

谢谢

Answer 1

如果你使用的是react-native;

1) 资产位置：

不要在 Android 项目中创建图像，而是使用 react-native。将您的文件放入您的 react-native 项目中，并在您的组件中使用它们。

2) 使用 SVG

如果您的项目中有可用的 SVG 类型，则使用 react-native-svg。 react-native-svg 使用原生绘图库，因此它适用于所有设备。您需要创建具有正确尺寸的 SVG 组件。如果稍后缩放它们，您将得到模糊的输出。您可以通过创建大小为 {width: 20, height: 20} 的 SVG 组件来对此进行测试。然后将它缩放到 3 倍或其他，你会得到一个模糊的输出。所以要小心尺寸。

比 PNG 文件更喜欢 SVG，后者的渲染成本总是很高。存在一些缺点，例如创建 SVG 并不容易，并且 react-native-svg 不支持所有 SVG 格式。

在您的情况下，您需要获取设备宽度和高度并计算您的 SVG 宽度和高度。例如：

<YourSVGComponent 
  width={Dimensions.get('window').width * 0.8}
  height={Dimensions.get('window').height * 0.8} />

3) @2x 和@3x 后缀

当您创建 IPA 或 APK 时，您项目中的所有资产将分别映射到您的 iOS 和 Android 项目。不同分辨率的目的是支持不同的密度。

来自React Native documentations：

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

For example, check@2x.png, will be used on an iPhone 7, while check@3x.png will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.

React Native 中响应图像的分辨率（在 phone 和平板电脑上不模糊）

Resolution for responsive image in react native (not blurry on phone and tablet)

size

resolution

image

react-native

responsive

1) 资产位置：

2) 使用 SVG

3) @2x 和@3x 后缀