模板版本：v3.0.3-0.0.1

[!TIP] Git 地址

安装与使用

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

npm

npm install @tuya-oh/rn-placeholder

yarn

yarn add  @tuya-oh/rn-placeholder

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

import {
  Placeholder,
  PlaceholderMedia,
  PlaceholderLine,
  Fade,
} from "rn-placeholder";

const App = () => (
  <Placeholder
    Animation={Fade}
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);
export default App;

约束与限制

兼容性

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

1. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1) ; IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25;

属性

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

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

组件 Placeholder

It's the wrapper around all of the other components. Using alone will not produce anything interesting. You have put some line or media inside to make it powerful.It accepts all the props of a React Native View plus:

| Name | Description | Type | Required | Platform | HarmonyOS Support | | --------- | --------------------------------------------------- | ------------- | -------- | -------- | ----------------- | | Animation | An optional component that animates the placeholder | Animations | no | All | Yes | | Left | An optional component to display on the left | ComponentType | no | All | Yes | | Right | An optional component to display on the right | ComponentType | no | All | Yes |

Animations

| Name | Description | Type | Required | Platform | HarmonyOS Support | | --------- | -------------------------------------------------- | ------------- | -------- | -------- | -------- | | Fade | This is the base animation that makes the placeholder become clearer on a specified interval| ComponentType | no | All | Yes | | ShineOverlay | This applies a tiny overlay from left to right of the placeholder. It's pretty neat but it has the drawback to only work without style customization: only on white background with gray lines |ComponentType| no | All | Yes | | Shine | The shine animation is an attempt to overcome the overlay problem of the ShineOverlay animation by animating only the differnt part of the placeholder | ComponentType | no | All | Yes | | Loader | A simple placeholder animation based on the standard loader (ActivityIndicator) of each platforms | ComponentType | no | All | Yes | | Progressive | A progressive loading animation effect | ComponentType | no | All | Yes | | Tweaking existing animations | It's possible to tweak a specific animation by passing it additional props. However keep in mind that it's important to spread the props from the Animation render function. Else you will be in strange behaviors| ComponentType | no | All | Yes |

组件 PlaceholderLine

A PlaceholderLine is one of the two basic and visual components of a placeholder.

| Name | Description | Type | Required | Platform | HarmonyOS Support | | -------- | ---------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- | | height | The line height, default is 12 | number | no | All | Yes | | color | The line color, default is #efefef | string | no | All | Yes | | width | The line width in percent, default is 100(%) | number | no | All | Yes | | noMargin | Defines if a line should have a margin bottom or not, default is false | boolean | no | All | Yes | | style | Customize the style of the underlying View component | object | no | All | Yes |

组件 PlaceholderMedia

A PlaceholderMedia is the second of the two basic and visual components of a placeholder. It can be used a single placeholder like following:

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ------- | -------------------------------------------------------- | ------- | -------- | -------- | ----------------- | | size | The media size (height / width), default is 40 | number | no | All | Yes | | isRound | Defines if the media is rounded or not, default is false | boolean | no | All | Yes | | color | The media color, default is #efefef | string | no | All | Yes | | style | Customize the style of the underlying View component | object | no | All | Yes |

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。