react-native-skeleton-placeholder

> 编程语言

开源

SkeletonPlaceholder 是一个 React Native 库,可用于轻松创建令人惊叹的加载效果。

733 stars0 点赞0 次浏览

访问官网 GitHub

工具介绍

SkeletonPlaceholder 是一个 React Native 库,可用于轻松创建令人惊叹的加载效果。

SkeletonPlaceholder

SkeletonPlaceholder 是一个 React Native 库,可使用 FlexBox 轻松创建令人惊叹的加载效果。 Android 和 iOS

安装

注意: 此包需要 @React-native-masked-view/masked-view 和 React-native-linear-gradient

步骤 #1

使用线程:

bash

yarn add @react-native-masked-view/masked-view react-native-linear-gradient

使用 npm:

bash

npm install @react-native-masked-view/masked-view react-native-linear-gradient --save

如果您运行的是 0.60 以下的 React-native 版本:

bash

react-native link @react-native-masked-view/masked-view react-native-linear-gradient

否则:

bash

cd ios
pod install

步骤 #2

使用线程:

bash

yarn add react-native-skeleton-placeholder

使用 npm:

bash

npm install react-native-skeleton-placeholder --save

使用方法

有两种方法可以使用此套件: 使用 SkeletonPlacehoder.Item

javascript

import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const App = () => {
  return (
    
      
        
        
          
          
        
      
    
  );
};

或者使用 View、Text 或 Image

javascript

import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const App = () => {
  return (
    
      
        
        
          
          Hello world
        
      
    
  );
};

属性

SkeletonPlaceholder

属性	描述	类型	默认值
backgroundColor	确定占位符的颜色	字符串	#E1E9EE
highlightColor	确定占位符的高亮颜色	字符串 (hex \| rgb \| rgba)	#F2F8FC
speed	确定动画的速度,单位为毫秒。0 表示禁用动画	数字