react-native-loading-placeholder 是一个用于 React Native 的npm包，它可以帮助我们在加载数据的同时展示一个美观的占位符。在这篇文章中，我们将会详细介绍如何在你的React Native应用中使用react-native-loading-placeholder。
安装
在开始之前，你需要先安装 react-native-loading-placeholder。使用以下命令即可：
npm install react-native-loading-placeholder --save
引入
安装完毕后，你可以在你的React Native项目中的文件中引入react-native-loading-placeholder。只需要添加以下代码即可：
import Placeholder from 'react-native-loading-placeholder';
使用
使用react-native-loading-placeholder非常简单，你只需要将占位符组件添加到你要加载的组件中。以下是一个使用占位符的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ----------- ---- -----------------------------------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
-------- ----
--
-
------------------- -
------------- -- -
--------------- -------- ----- ---
-- ------
-
-------- -
------ -
------
------------------- -
------------
-------- ------- --- ------------- -- --
------------------------------
------------------------
-----------
--
-
----- -------- ---------------- ---------- ------- --- ------------- -- ---
----------- ------------
-------
-
-------
--
-
-
------ ------- --------在上面的例子中，我们首先在组件的构造函数中设置了一个状态 loading，这个状态将在组件被挂载后一秒钟后变成 false。在组件被渲染的时候，我们使用了一个条件表达式，如果 loading 为 true，那么使用占位符组件 Placeholder，否则使用一个普通的 View 组件。
在占位符组件中，我们使用了一些属性来控制占位符的样式和动画：
- style：组件样式。
- animating：是否开启动画。
- highlightColor：高亮颜色，当动画向右移动时，将会露出此高亮颜色。
- speed：动画速度。
总结
react-native-loading-placeholder是一个优秀的npm包，它可以使我们更加美观地展示我们的数据加载状态。在这篇文章中，我们介绍了如何安装和使用react-native-loading-placeholder，并展示了一个使用占位符的例子。通过学习本文，你可以更好地掌握react-native-loading-placeholder，并将其运用在你的React Native应用中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b581e8991b448e3042