在移动应用开发中，载入指示器（Loading Indicator）是很常用的功能。使用 react-native 开发应用时，我们可以使用 npm 包 react-native-sleek-loading-indicator-hm 来快速实现载入指示器的效果，本文将详细介绍该 npm 包的使用方法。
安装
使用 npm 安装 react-native-sleek-loading-indicator-hm：
npm install react-native-sleek-loading-indicator-hm --save
导入
在需要使用的组件中导入 react-native-sleek-loading-indicator-hm：
import React from 'react'; import SleekLoadingIndicator from 'react-native-sleek-loading-indicator-hm';
使用
SleekLoadingIndicator 组件可以在需要显示指示器的位置放置。使用 SleekLoadingIndicator 组件时，需要传入一个名为 isActive 的属性，该属性指示指示器是否应该显示。示例如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ------ - ---- ---------------
------ --------------------- ---- ------------------------------------------
------ ------- -------- ----- -
----- --------- ----------- - ----------------------
----- ------- - -- -- -
-----------------
------------- -- -
------------------
-- ------
--
------ -
----- -------------------------
------- ----------- -------- ----------------- --
-------- - ---------------------- ------------------ -- - -----
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---上面的代码中，当用户点击按钮时，组件的状态会被修改为正在加载，并且 SleekLoadingIndicator 组件会根据 isActive 属性显示或隐藏。
进一步定制
SleekLoadingIndicator 组件提供了许多进一步定制的属性，其中包括不同类型（Type）、大小（Size）、颜色（Color）和线宽（LineWidth）等。示例如下：
<SleekLoadingIndicator
isActive={true}
type={'wave'}
size={'small'}
color={'red'}
lineWidth={3}
/>总结
本文介绍了 react-native-sleek-loading-indicator-hm 的安装、导入和使用方法，并提供了进一步定制的方式。使用 react-native-sleek-loading-indicator-hm，开发者可以快速实现载入指示器的效果，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e9a81e8991b448dbf05