Question

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

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

Answer 1

使用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 进行更改：

awk -v line="-----------------------------------" '
BEGIN{
  FS="#"
  OFS="|"
  num=split("STATUS,ID,Country,Description",a,",")
  print line
}
FNR==NR{
  for(i=2;i<=NF;i++){
    max[i]=max[i]>=length($i)?max[i]:length($i)
  }
  next
}
FNR==1{
  for(i=1;i<=num;i++){
    header=(header?header OFS:"")sprintf("%-"max[i]"s",a[i])
  }
  print header
}
{
  for(i=1;i<=NF;i++){
    $i=sprintf("%-"max[i]"s",$i)
  }
}
1;
END{
  print line
}
'  Input_file  Input_file

Answer 2

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

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 搜索路径，位于主要项目目标的“构建设置”标签中
将node_modules / react-native-webp-support /中的ReactNativeWebp.xcodeproj添加到您的项目文件（右键单击您的项目，然后选择“将文件添加到...”）
将libReactNatveWebp.a添加到您的带有库的链接二进制文件步骤，位于主要项目目标的“构建阶段”标签
构建一个新的二进制文件，并使用.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

Answer 3

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

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

请检查一下https://github.com/Aleksefo/react-native-webp-format

如何在本机中支持WebP图像？

3 个答案: