react-native-placeholder-bcm 使用教程

阅读时长 8 分钟读完

前言

react-native-placeholder-bcm 是一个基于 React Native 的占位符组件库,可以让开发者在 UI 布局时方便地添加占位符,提高用户体验。本篇文章将深入介绍如何使用 react-native-placeholder-bcm,包括组件库的安装和使用。

安装

使用 react-native-placeholder-bcm 前,我们需要先安装它。可以通过 npm 直接进行安装,命令如下:

当安装完毕后,我们需要在项目中引入组件。

使用

组件目录位于 react-native-placeholder-bcm/lib,所以我们需要先引入:

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

当你引用了组件之后,你就可以在你的应用程序中使用它们了。

PlaceholderView

PlaceholderView 是大多数情况下你将使用的组件,尤其是无需图片的占位符场景。使用方法如下:

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

上述代码使用了 PlaceholderView 组件来创建占位符。loader 属性接受一个函数,渲染加载占位符。duration 属性可以设置占位符的动画时间,以毫秒为单位。onReady 属性可以传递一个回调函数,在占位符显示完后执行。在上述代码中,我们还创建了一个 PlaceholderMedia 组件来渲染默认的“占位媒体”(placeholder media)。你可以在默认情况下使用这种媒体,或者自定义你自己的占位符媒体。

PlaceholderMedia

如果你需要单独使用占位媒体组件,可以使用 PlaceholderMedia,使用方法如下:

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

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

在上述代码中,我们只是创建了一个圆形的占位媒体组件,你可以自定义你自己的占位媒体。

Fade

Fade 是一个可以控制占位符淡入、淡出的高阶组件,它接受一个子组件作为其唯一的子元素,这个子组件就是占位符内容。使用方法如下:

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

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

在上述代码中,isLoading 属性用于控制淡入/淡出的时机,placeholderStyle 属性用于自定义占位符样式。

Shine

Shine 是一个可以控制占位符产生闪光效果的高阶组件。使用方法如下:

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

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

使用方法和 Fade 类似,在上述代码中,isLoading 属性用于控制淡入/淡出的时机,placeholderStyle 属性用于自定义占位符样式。

ShineOverlay

ShineOverlay 是一个可以控制占位符产生闪光效果,同时不影响子组件的高阶组件。使用方法如下:

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

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

在上述代码中,isReady 用于控制占位符的显示与隐藏,shineDurationfadeDuration 用于控制闪光产生的时长和占位符的淡入、淡出时长。

Progressive

Progressive 是一个基于两个子元素进行动画绘制的组件,可以通过属性控制动画。使用方法如下:

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

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

在上述代码中,isReady 用于控制占位符的显示与隐藏,delay 用于延迟动画的开始时间。

ShineProgress

ShineProgress 组件会在前一个组件完成动画之后根据子元素绘制一个闪光效果。使用方法如下:

在上述代码中,animate 属性用于控制占位符的显示与隐藏。

Facebook

Facebook 组件是一种常用的加载指示器样式。使用方法如下:

在上述代码中,color 属性用于设置加载指示器的颜色,size 属性用于设置大小,animating 属性用于控制加载指示器的显示与隐藏。

结尾

通过本篇文章,你已经学会如何使用 react-native-placeholder-bcm 来添加占位符来提高用户体验。不仅如此,本文还对该组件库的各种使用方式进行了详细介绍,包括组件库的安装和使用。我们希望读者可以在实际开发中加以应用。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cc081e8991b448e63ba

纠错
反馈