npm 包 @oscarlodriguez/nativescript-fresco 使用教程

前言

@oscarlodriguez/nativescript-fresco 是一个基于 NativeScript 的开源 npm 包，它提供了一个清晰、高效的方式向你的移动应用程序添加图片。本文将向您介绍如何使用 @oscarlodriguez/nativescript-fresco 这个 npm 包。

安装

首先您需要在您的项目中安装 @oscarlodriguez/nativescript-fresco 包，您可以使用以下命令行：

tns plugin add @oscarlodriguez/nativescript-fresco

使用方法

1. 首先在您的页面中引入 @oscarlodriguez/nativescript-fresco 模块：

import { FrescoDrawee } from "@oscarlodriguez/nativescript-fresco";

1. 接着在您的页面中添加这个模块。例如，在模板中添加其标签：

<StackLayout>
  <FrescoDrawee
    width="200"
    height="200"
    uri="http://lorempixel.com/400/400/sports/"></FrescoDrawee>
</StackLayout>

以上代码将在您的页面上渲染一个 200 x 200 像素的图片，它的源 url 是 http://lorempixel.com/400/400/sports/。

属性

FrescoDrawee 组件有以下属性：

• uri: 必选属性，指定要加载的图片的 url。
• placeholderImageUri: 可选属性，指定一个用于占位符的图片 url。
• failureImageUri: 可选属性，指定一个用于在加载失败时显示的图片 URL。
• actualImageScaleType: 可选属性，默认值是 fitCenter。
• controller: 可选属性。
• format: 可选属性。
• autoPlayAnimations: 可选属性，默认为 true。

您可以参考以下示例以完成更丰富的组合：

<FrescoDrawee
    width="200"
    height="200"
    uri="http://lorempixel.com/400/400/sports/"
    placeholderImageUri="~/res/placeholder.png"
    failureImageUri="~/res/error.png"
    actualImageScaleType="centerCrop">
</FrescoDrawee>

以上将在您的页面上渲染一个 200 x 200 像素的图片，它的源 url 是 http://lorempixel.com/400/400/sports/，同时添加了一个用作占位符的 ~/res/placeholder.png 和一个用作失败图片的 ~/res/error.png。

结论

@oscarlodriguez/nativescript-fresco 包为我们在移动应用中显示图片提供了非常方便的解决方案。在本教程中，我们向您介绍了如何在您的应用中使用它。我们鼓励您尝试使用它，并根据需要进行更改和自定义。

示例代码

您可以参考以下示例代码以帮助您使用该包：

-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ - ---- --------------------------------------

------------
    --------- ----------
    ------------ ------------------------
--
------ ----- ------------- ---------- ------ -
    ------------- --

    ----------- ---- --

    --------- ------ -
        ----------------------------------------------------------------------------------------------------------------------

    -------------------- ------ -
        -------------------------------------------------------------------------------

    ---------------- ------ -
        -----------------------------------------------------------------------------------------

    --------------------- ------ - -------------

    -------------------------- ------------- -
        ---------------- - ---------------------
    -
-

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