react native如何支持WebP图片？

Posted 2023-03-25

【中文标题】react native如何支持WebP图片？

【英文标题】：How to support WebP images in react native?

【发布时间】：2017-12-18 02:25:01

【问题描述】：

我必须在我的 react-native 应用程序中显示 .WebP 图像扩展图像。我在 ios 上运行，它没有显示任何图像。我搜索了一下，发现一些信息说 webP 图像在 iOS 上不支持，需要使用库或必须编写扩展来支持它。我用了这个react-native library to support webP。仍然，我没有得到。有人可以请教这个吗？该怎么做？

注意：请不要将此标记为重复。我已经检查了 *** 并没有找到答案。 该问题可能类似于webp images problem-***

【问题讨论】：

WebP 支持很差：caniuse.com/#feat=webp

此链接仅针对台式机进行比较，我想这个问题仍未解决

嗨 @Sivajee Battina 你有什么解决方案可以在 react-native 中将图像转换为 WebP 格式

没有@VenkateshVaddadi，没有任何效果。作为解决方案，我们继续使用不同的格式。

【参考方案1】：

我能够使用链接的媒体文章和 repo 为我的 react native 应用添加 webp 支持

yarn add TGPSKI/react-native-webp-support 在 Xcode 中打开您的项目 从 node_modules/react-native- 添加 WebP.framework 和 WebPDemux.framework webp-support/ 到您的项目文件（右键单击您的项目并选择“添加 文件到...") 将WebP.framework 和WebPDemux.framework 添加到您的链接框架和 主项目目标的“常规”选项卡中的库 将“$(SRCROOT)/../node_modules/react-native-webp-support”添加到您的 框架搜索路径，位于您的构建设置选项卡中 主要项目目标 将 $(SRCROOT)/../node_modules/react-native-webp-support 添加到您的标头 搜索路径，位于主项目目标的构建设置选项卡中 将 ReactNativeWebp.xcodeproj 从 node_modules/react-native-webp-support/ 添加到 您的项目文件（右键单击您的项目并选择“将文件添加到...”） 将 libReactNatveWebp.a 添加到 Link Binary with Libraries 步骤，位于 主项目目标的 Build Phases 选项卡 构建一个新的二进制文件，并使用 .webp 格式的图像

https://medium.com/@tgpski/react-native-webp-reducing-bundle-binary-sizes-increase-speed-with-webp-image-format-aa9b1aa11405

https://github.com/TGPSKI/react-native-webp-support

【讨论】：

我使用的是 RN 0.60.5，但这不起作用。我什至无法建造。

@aung-myint-thein 您可能想就您收到的特定错误消息提出问题。

【参考方案2】：

使用https://github.com/DylanVann/react-native-fast-image这个包。我也在 IOS 上加载 .webp 图像时遇到问题，我使用了它，它增加了对 .webp 图像的支持，从而解决了我的问题。

根据 repo，您​​必须使用 React Native 0.60.0 或更高版本才能使用最新版本的 react-native-fast-image。

如果图像仍然无法加载，请尝试在您的 AppDelegate.m 上进行此更改，如本问题 https://github.com/DylanVann/react-native-fast-image/issues/522:

中所建议的那样

#import "SDImageCodersManager.h"
#import <SDWebImageWebPCoder/SDImageWebPCoder.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

    // . . .

    [SDImageCodersManager.sharedManager addCoder:SDImageWebPCoder.sharedCoder];

    // . . .

【参考方案3】：

我发布了一个新的 WebP 集成库，应该可以帮助您解决问题。

它支持最新的 React Native 版本、Cacaopods 和自动链接，并具有更好的原生库以提高性能。

请查看https://github.com/Aleksefo/react-native-webp-format