NPM 包 React-Native-Fast-Image-Ligen 使用教程

React Native Fast Image Ligen 是一款基于 React Native 的图片加载组件库。它提供快速加载图片等特性，使得您的应用程序能够更轻松地处理高性能要求的图片，从而构建更出色的 React Native 应用程序。

安装

使用 npm 命令来安装 react-native-fast-image-ligen。

npm install react-native-fast-image-ligen --save

接着，按照下面的步骤执行即可。

iOS

使用 CocoaPods 安装：

pod 'FastImageLigen', :podspec => '../node_modules/react-native-fast-image-ligen/FastImageLigen.podspec'

执行 pod install 命令，然后就可以在 Xcode 中打开 .xcworkspace 文件运行项目了。

Android

在你的项目的 android/settings.gradle 文件中添加：

include ':react-native-fast-image-ligen'
project(':react-native-fast-image-ligen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image-ligen/android')

在 android/app/build.gradle 文件的 dependencies 块中添加：

implementation project(':react-native-fast-image-ligen')

并在 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 指定了图片加载的缓存方式。

<FastImage
    source={{
        uri: 'https://unsplash.it/400/400?image=1',
        headers:{ Authorization: 'someAuthToken' },
        priority: FastImage.priority.normal,
        cache: FastImage.cacheControl.immutable,
    }}
/>

resizeMode

resizeMode 是图片的缩放方式，它有以下几个选项：

• cover：在保持纵横比的前提下缩放图片，直到尽可能充满容器。图片的一部分可能无法显示在容器中。
• contain：在保持纵横比的前提下缩放图片，直到完全显示在容器中为止。可能会留有黑色的空白区域。
• stretch：拉伸图片以适应容器。
• center：在容器的中心位置不缩放图片，只显示图片的中心部分。

borderRadius

borderRadius 是图片的边框半径，它可以是数字或百分比形式的值。

<FastImage
    borderRadius={50}
    source={{
        uri: 'https://unsplash.it/400/400?image=1',
    }}
/>

onLoadStart

onLoadStart 是图片开始加载时的回调函数。

<FastImage
    onLoadStart={() => {
        console.log('loading...');
    }}
    source={{
        uri: 'https://unsplash.it/400/400?image=1',
    }}
/>

onProgress

onProgress 是图片加载进度时的回调函数。

<FastImage
    onProgress={(evt) => {
        console.log('current load is at', evt.nativeEvent.loaded / evt.nativeEvent.total);
    }}
    source={{
        uri: 'https://unsplash.it/400/400?image=1',
    }}
/>

onLoad

onLoad 是图片加载成功时的回调函数。

<FastImage
    onLoad={() => {
        console.log('Image loaded successfully');
    }}
    source={{
        uri: 'https://unsplash.it/400/400?image=1',
    }}
/>

onError

onError 是图片加载失败时的回调函数。

<FastImage
    onError={() => {
        console.log('Image failed to load');
    }}
    source={{
        uri: 'https://unsplash.it/400/400?image=1',
    }}
/>

onLoadEnd

onLoadEnd 是图片加载结束时的回调函数。

<FastImage
    onLoadEnd={() => {
        console.log('Load complete');
    }}
    source={{
        uri: 'https://unsplash.it/400/400?image=1',
    }}
/>

结语

通过 React Native Fast Image Ligen 组件库，我们可以在 React Native 开发中享受到快速加载图片等功能，从而为我们的应用带来更出色的用户体验。以上是 React Native Fast Image Ligen 的基本使用教程，希望对您在应用中加速图片加载有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057cb781e8991b448ebffc