ios - 如何在 React Native 中支持 WebP 图片？

Question

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

注意:请不要将其标记为重复。我已经检查了 StackOverflow，但没有找到答案。 该问题可能类似于 webp images problem-stackoverflow

Answer 1

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

1. yarn 添加 TGPSKI/react-native-webp-support
2. 在 Xcode 中打开您的项目
3. 从 node_modules/react-native- 添加 WebP.framework 和 WebPDemux.framework webp-support/到您的项目文件(右键单击您的项目并选择“添加 文件...")
4. 将 WebP.framework 和 WebPDemux.framework 添加到您的链接框架和 主项目目标的常规选项卡中的库
5. 添加“$(SRCROOT)/../node_modules/react-native-webp-support”到你的 框架搜索路径，位于您的build设置选项卡中 主要项目目标
6. 将 $(SRCROOT)/../node_modules/react-native-webp-support 添加到您的 header 搜索路径，位于主项目目标的“build设置”选项卡中
7. 将 ReactNativeWebp.xcodeproj 从 node_modules/react-native-webp-support/添加到 您的项目文件(右键单击您的项目并选择“将文件添加到...”)
8. 将 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