简介
在我们的 React Native 应用中，需要经常用到加载动画，使用 npm 包 react-native-loading-spinner-modal 可以快速实现一个简单易用的加载动画。
安装
使用 npm 安装 react-native-loading-spinner-modal：
npm install react-native-loading-spinner-modal
使用
导入 react-native-loading-spinner-modal：
import Spinner from 'react-native-loading-spinner-modal';
在页面需要显示加载动画时，使用 <Spinner> 标签即可，还可以设置相关参数：
visible：是否显示加载动画，可以在代码中动态修改；cancelable：是否能通过点击背景取消加载动画；animation：动画类型，支持 'none'、'slide'、'fade'；size：加载动画的尺寸；overlayColor：背景颜色；color：加载动画的颜色。
例如：
<Spinner
visible={loading}
cancelable={false}
animation={'fade'}
size={'large'}
overlayColor={'rgba(0, 0, 0, 0.5)'}
color={'#fff'}
/>示例代码
下面是一个示例代码，实现了一个登录页面，在用户登录时显示加载动画：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ---------- ----------------- ---- - ---- ---------------
------ ------- ---- -------------------------------------
------ ------- -------- ------- -
----- --------- ----------- - ----------------
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ----------- - -- -- -
-----------------
-- ------
------------- -- -
------------------
-- ------
--
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
----------
-------- ------------ ------- ------------ -- ------- --- ------ ---- ------------- -- --
-------------------- -- ------------------
----------------
----------------------
--
----------
-------- ------------ ------- ------------ -- ------- --- ------ ---- ------------- -- --
-------------------- -- ------------------
----------------
---------------------
----------------------
--
-----------------
-------- ---------------- ------- -------- --- ------------- - --
---------------------
-
----- -------- ------ ------ ------------
-------------------
--------
-----------------
------------------
------------------
--------------
---------------------- -- -- ------
--------------
--
-------
--
-结语
通过这篇文章，我们学会了如何使用 react-native-loading-spinner-modal 快速实现一个加载动画。在实际开发中，加载动画是一个不可或缺的组件，它能够起到优化用户体验的作用，提升应用的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf681e8991b448e6b82