Template version: v0.4.0

`react-content-loader`

该三方库当前支持直接从 npm 下载，版本对应关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-content-loader	~7.2.0	GitCode Releases	`0.82.*`	否	API12+	7.1.2	Npm Address
@react-native-ohos/react-content-loader	~7.1.0	GitCode Releases	`0.77.*`	否	API12+	7.0.2	Npm Address
@react-native-oh-tpl/react-content-loader	~7.0.2-0.0.2	Github Releases	`0.72.*`	否	API12+	7.0.2	Npm Address

1. 安装与使用

进入到工程目录并输入以下命令：

npm

# 0.72
npm install @react-native-oh-tpl/react-content-loader

# 0.77/0.82
npm install @react-native-ohos/react-content-loader

yarn

# 0.72
yarn add @react-native-oh-tpl/react-content-loader

# 0.77/0.82
yarn add @react-native-ohos/react-content-loader

下面的代码展示了这个库的基本使用场景：

Warning

使用时 import 的库名不变。

import ContentLoader, { Facebook, Code, List, BulletList, Instagram, Rect, Circle } from 'react-content-loader/native'
import { View, ScrollView } from "react-native"

export function AppExample() {
    return <View style={{ flex: 1, backgroundColor: 'white' }}>
        <ScrollView >
            <ContentLoader
                width={'100%'}
                height={80}
                animate={false}
                viewBox="0 0 380 70"
            >
                <Circle cx="30" cy="30" r="30" />
                <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
                <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
            </ContentLoader>
            <Facebook></Facebook>
            <Code></Code>
            <List></List>
            <BulletList></BulletList>
            <Instagram></Instagram>
        </ScrollView>
    </View>
}

2. Link

本库依赖@react-native-ohos/react-native-svg，如已在鸿蒙工程中引入过该库，则无需再次引入。

如未引入请参照@react-native-ohos/react-native-svg 文档进行引入

3. 约束与限制

3.1. 兼容性

本文档内容基于以下版本验证通过：

RNOH: 0.72.96; SDK: HarmonyOS 5.1.1; IDE: DevEco Studio 5.1.1.840; ROM: 6.0.0;
RNOH: 0.77.18; SDK: HarmonyOS 5.1.1; IDE: DevEco Studio 5.1.1.840; ROM: 6.0.0;
RNOH: 0.82.1; SDK: HarmonyOS 6.0.1; IDE: DevEco Studio 6.0.1; ROM: 6.0.0.120;

4. 属性

Tip

"Platform" 列表示该属性在原三方库上支持的平台。

Tip

"HarmonyOS Support" 列为 yes 表示 HarmonyOS 平台支持该属性；no 表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Options

Name	Description	Type	Required	Platform	HarmonyOS Support
animate	设置为 false 以禁用动画	boolean	no	all	yes
speed	动画速度（以秒为单位）	number	no	all	yes
rtl	内容从右到左	boolean	no	all	yes
backgroundColor	用作动画的背景	string	no	all	yes
viewBox	使用 viewBox 属性设置自定义 viewBox 值，有关如何使用的更多信息，请阅读文章 How to Scale SVG	string	no	all	yes
foregroundColor	用作动画的前景	string	no	all	yes
interval	动画间隔（以秒为单位）	number	no	all	yes
beforeMask	在内容之前定义自定义形状	JSX.Element	no	all	yes
uniqueKey	使用相同的 prop key 值，这将解决 SSR 中的不一致性问题	string	no	React DOM only	no
title	用于描述元素是什么。使用 ''（空字符串）来移除。	string	no	React DOM only	no
baseUrl	如果你在文档的中使用，那么这个属性是必需的。这个属性通常这样使用：`，它将用相对路径填充 SVG 属性。相关#93.	string	no	React DOM only	no
backgroundOpacity^7.2.0+	背景透明度（0 = 透明，1 = 不透明）用于解决 Safari中的一个问题	number	no	all	yes
foregroundOpacity^7.2.0+	动画透明度（0 = 透明，1 = 不透明）用于解决 Safari中的一个问题	number	no	all	yes
style	css 样式	React.CSSProperties	no	React DOM only	no