时间戳

首页 > 解决方案 > React-Native iOS 参考 xcassets 图像大小错误

ios - React-Native iOS 参考 xcassets 图像大小错误

问题描述

Xcode 10.0

iOS 7 及更高版本

我设置了一个应用程序，以便它加载由 处理的特定启动图像xcassets，具有适合iOS 6及更高版本的大小。这些图像加载良好。

当应用程序完成加载时，我想将加载图像用作应用程序内的背景splash/login button。我使用具有适当大小和命名约定source={{uri: "LaunchImage"}}（Default.png、Default@2x.png、Default-568@2x.png 等）的图像（或 BackgroundImage）。xcassets

然而，在应用程序中，它似乎只引用了基本的、最小的图像(Default.png)而不是正确大小的图像（例如，7 的 Default-568@2x.png）。

这是 React-Native 应该正确处理的事情吗？有没有办法让我指定 source.uri 中的大小？

谢谢。

标签： iosxcodereact-native

解决方案

如果图像看起来更小，我们可以scale将其设置为适合组件内部的图像。Image

icon={{uri: check', scale: 2}}

我们不必担心为不同的设备适配不同尺寸的图像。

根据 React Native 文档

文件结构：

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

您的 .js 文件：

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

节点打包器将根据设备的屏幕密度捆绑并提供图像。例如，check@2x.png, 将用于 an iPhone 7，而check@3x.png将用于 aniPhone 7 Plus 或 a Nexus 5。如果没有匹配屏幕密度的图像，将选择最接近的最佳选项。

推荐阅读