React Native Fast Image Ligen 是一款基于 React Native 的图片加载组件库。它提供快速加载图片等特性，使得您的应用程序能够更轻松地处理高性能要求的图片，从而构建更出色的 React Native 应用程序。
安装
使用 npm 命令来安装 react-native-fast-image-ligen。
--- ------- ----------------------------- ------
接着，按照下面的步骤执行即可。
iOS
使用 CocoaPods 安装：
--- ----------------- -------- -- ----------------------------------------------------------------------
执行 pod install 命令，然后就可以在 Xcode 中打开 .xcworkspace 文件运行项目了。
Android
在你的项目的 android/settings.gradle 文件中添加：
------- -------------------------------- ---------------------------------------------------- - --- ---------------------------- --------------------------------------------------------
在 android/app/build.gradle 文件的 dependencies 块中添加：
-------------- -----------------------------------------
并在 MainApplication.java 中导入包：
------ ------------------------------------------------------------
---------
--------- ------------------ ------------- -
------ ----------------------------
--- -------------------
--- -----------------------
--
-快速上手
基本使用
React Native Fast Image Ligen 支持本地图片、网络图片以及 base64 图像的加载。有许多用法可以通过 FastImage 组件轻松地实现，下面是一个基本的示例：
------ --------- ---- --------------------------------
----------
-------- ------ ---- ------- --- --
---------
---- --------------------------------------
--------- -------------- --------------- --
--------- --------------------------
--
-----------------------------------------
--其中，source 是一个必须的属性，支持 uri、headers 和 priority 选项。
属性
下面是 FastImage 组件可用的属性：
source
source 属性是一个必须的属性，它用来加载图片。它支持这些格式：uri，headers，priority 和 cache。其中，uri 指定了要加载的 image uri，headers 指定了额外的 headers，priority 指定了图片的加载优先级，cache 指定了图片加载的缓存方式。
----------
---------
---- --------------------------------------
--------- -------------- --------------- --
--------- --------------------------
------ ---------------------------------
--
--resizeMode
resizeMode 是图片的缩放方式，它有以下几个选项：
- cover：在保持纵横比的前提下缩放图片，直到尽可能充满容器。图片的一部分可能无法显示在容器中。
- contain：在保持纵横比的前提下缩放图片，直到完全显示在容器中为止。可能会留有黑色的空白区域。
- stretch：拉伸图片以适应容器。
- center：在容器的中心位置不缩放图片，只显示图片的中心部分。
borderRadius
borderRadius 是图片的边框半径，它可以是数字或百分比形式的值。
----------
-----------------
---------
---- --------------------------------------
--
--onLoadStart
onLoadStart 是图片开始加载时的回调函数。
----------
--------------- -- -
--------------------------
--
---------
---- --------------------------------------
--
--onProgress
onProgress 是图片加载进度时的回调函数。
----------
----------------- -- -
-------------------- ---- -- ---- ---------------------- - -----------------------
--
---------
---- --------------------------------------
--
--onLoad
onLoad 是图片加载成功时的回调函数。
----------
---------- -- -
------------------ ------ ---------------
--
---------
---- --------------------------------------
--
--onError
onError 是图片加载失败时的回调函数。
----------
----------- -- -
------------------ ------ -- -------
--
---------
---- --------------------------------------
--
--onLoadEnd
onLoadEnd 是图片加载结束时的回调函数。
----------
------------- -- -
----------------- -----------
--
---------
---- --------------------------------------
--
--结语
通过 React Native Fast Image Ligen 组件库，我们可以在 React Native 开发中享受到快速加载图片等功能，从而为我们的应用带来更出色的用户体验。以上是 React Native Fast Image Ligen 的基本使用教程，希望对您在应用中加速图片加载有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057cb781e8991b448ebffc