介绍
react-native-content-loader 是一款 React Native 的组件库，可以用来方便地创建动画式的加载效果。它依赖于 react-native-svg 和 lodash，这两个组件需要提前安装。
安装和使用
可以通过 npm 安装 react-native-content-loader：
npm install react-native-content-loader --save
在需要使用的组件中引入它：
import ContentLoader from 'react-native-content-loader';
然后可以使用 <ContentLoader> 组件来创建加载动画。在 rect 属性中定义需要加载的图形，填充颜色在 color 属性中设置。以下是一个示例代码：
-- -------------------- ---- ------- -------------- ------------ ----------- --------- ---------------------- ------------------------ - ----- ----- ----- ------ ------ ----------- ----------- -- ----- ------ ------ ------ ------ ----------- ----------- -- ----- ------ ------ ------ ------ ----------- ----------- -- ----- ----- ------ ------ ------ ----------- ----------- -- ----- ------ ------ ------ ------ ---------- ----------- -- ----- ------ ------- ------ ------ ---------- ----------- -- ----- ----- ------- ------ ------ ----------- ----------- -- ----- ------ ------- ------ ------ ----------- ----------- -- ----- ------ ------- ------ ------ ----------- ----------- -- ----- ----- ------- ------ ------ ----------- ----------- -- ----------------
以上代码会创建一个高为 200、宽为 200 的加载动画，其中需要加载的部分是一些矩形，并且每个矩形的填充颜色不同。
进一步使用
除了可以通过 rect 属性创建矩形之外，还可以通过 circle 属性创建圆形。和 rect 相同，circle 同样需要指定位置和半径。
-- -------------------- ---- ------- -------------- ------------ ----------- --------- ---------------------- ------------------------ - ------- ------- ------- ------ -- ----- ------ ------ ------ ------ ----------- ---------- -- ----- ------ ------ ------ ------ ---------- ---------- -- ----- ----- ------ ------ ------ ----------- ----------- -- ----------------
以上代码创建了包括一个圆形和两个矩形的加载动画。
总结
React Native 可以实现各种各样的效果，包括加载动画。react-native-content-loader 提供了一个快速创建加载动画的方法，使用起来很方便。可以根据各自的需要和需求，自由地创建出自己需要的加载动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3681e8991b448daf6d