如何在React Native中支持WebP图像？

Question

我需要在我的React Native应用程序中显示 .WebP 图像扩展名的图像。我正在iOS系统上运行，但图片无法显示。我查阅了一些信息并发现 WebP 图像不支持 iOS 系统，需要使用库或者编写扩展来支持它。我使用了这个 React Native 的 WebP 库。但是仍然无法实现。请问有什么建议吗？应该怎么做？

注意：请不要将此标记为重复问题。我已经检查过 StackOverflow 但没有找到答案。这个问题可能类似于 webp images problem-stackoverflow

- Sivajee Battina

---

WebP支持非常差：https://caniuse.com/#feat=webp - Denys Séguret

这个链接只适用于桌面端，我猜这个问题仍未解决。 - Anonymous

嗨，@Sivajee Battina，你有没有解决方案可以在React Native中将图像转换为WebP格式？ - Venkatesh Vaddadi

没有@VenkateshVaddadi，什么都没用。作为解决方案，我们采用了不同的格式。 - Sivajee Battina

@DenysSéguret 他要求支持React Native。caniuse.com不适用于此，因为它是针对浏览器的。React Native是用于移动开发的。 - Broda Noel

Answer 1

我能够使用链接的 Medium 文章和仓库为我的 React Native 应用添加 Webp 支持。

1. yarn add TGPSKI/react-native-webp-support
2. 在 Xcode 中打开您的项目
3. 从 node_modules/react-native-webp-support/ 添加 WebP.framework 和 WebPDemux.framework 到你的项目文件中（右键点击你的项目并选择 "Add Files to..."）
4. 在主要项目目标的 General 选项卡中将 WebP.framework 和 WebPDemux.framework 添加到 Linked Frameworks and Libraries 中
5. 在主要项目目标的 Build Settings 选项卡中添加 “$(SRCROOT)/../node_modules/react-native-webp-support” 到 Framework Search Paths 中
6. 在主要项目目标的 Build Settings 选项卡中添加 $(SRCROOT)/../node_modules/react-native-webp-support 到 Header Search Paths 中
7. 从 node_modules/react-native-webp-support/ 添加 ReactNativeWebp.xcodeproj 到你的项目文件中（右键点击你的项目并选择 "Add Files to..."）
8. 在主要项目目标的 Build Phases 选项卡中将 libReactNatveWebp.a 添加到 Link Binary with Libraries 步骤中
9. 构建一个新的二进制文件，并使用 .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

- Eric Dunaway

---

我正在使用RN 0.60.5，但它无法正常工作。我甚至无法构建。 - Aung Myint Thein

@aung-myint-thein 你可能想要提出一个带有你所遇到的具体错误信息的问题。 - Eric Dunaway

Answer 2

请使用这个包 https://github.com/DylanVann/react-native-fast-image 。我也曾经遇到在IOS上加载.webp图像的问题，但是使用此包可以添加对.webp图像的支持，从而解决了我的问题。

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

如果图像仍无法加载，请尝试按照此问题 https://github.com/DylanVann/react-native-fast-image/issues/522 所建议，在 AppDelegate.m 上进行以下更改：

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

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // . . .

    [SDImageCodersManager.sharedManager addCoder:SDImageWebPCoder.sharedCoder];

    // . . .
}

- Mandip Giri

Answer 3

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

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

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

- Alex Fomushkin

---

我刚刚在RN v0.72.2中使用了这个。但是它没有起作用。请注意，我是通过uri使用远程图片的。 - Nate