简介
React Native 是目前移动端开发比较流行的技术之一，为了方便开发者在 React Native 中快速搭建指示器组件，npm 中推出了 react-native-extend-indicator 包。本文将介绍如何使用该 npm 包，并结合示例代码进行讲解。
1. 安装
$ npm install react-native-extend-indicator --save
2. 引入
import Indicator from 'react-native-extend-indicator';
3. 使用
-- -------------------- ---- -------
----------
-------- ---------- -- --
------------------- -- -
----- -------- -------------- ----- ---
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
-------
--
----------------
--4. 参数
style：指示器容器样式。可选。renderIndicator：指示器渲染函数。必选。status：控制指示器的状态。可选值：loading、failure、success。必选。
5. 示例
加载中状态
-- -------------------- ---- -------
----------
-------- ---------- -- --
------------------- -- -
----- -------- -------------- ----- ---
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
-------
--
----------------
--加载失败状态
-- -------------------- ---- -------
----------
-------- ---------- -- --
------------------- -- -
----- -------- -------------- ----- ---
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
-------
--
----------------
--加载成功状态
-- -------------------- ---- -------
----------
-------- ---------- -- --
------------------- -- -
----- -------- -------------- ----- ---
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
----- -------- ------ --- ------- --- ------------- -- ---------------- ---------- ------------ -- -- --
-------
--
----------------
--总结
react-native-extend-indicator 是一个方便 React Native 开发者快速搭建指示器组件的 npm 包。通过本文的介绍，我们可以了解它的安装、引入、使用以及参数。同时，结合示例代码，我们可以方便地实现不同状态下不同的指示器效果，提升了项目的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566a881e8991b448e2e01