From 773529efc674549a3eea878c61d9a71f915c2ffd Mon Sep 17 00:00:00 2001 From: fzxlzy <810528574@qq.com> Date: Fri, 5 Jan 2024 14:23:55 +0800 Subject: [PATCH 1/5] =?UTF-8?q?[Issues:=20#I8TSZT]=20rn-placeholder?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=8F=8F=E8=BF=B0=E9=94=99=E8=AF=AF=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/rn-placeholder.md | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/zh-cn/rn-placeholder.md b/zh-cn/rn-placeholder.md index 85843256..8b72d8a7 100644 --- a/zh-cn/rn-placeholder.md +++ b/zh-cn/rn-placeholder.md @@ -14,6 +14,8 @@ ## 安装与使用 +> [!tip] 因原作者未发布最新的组件版本到 npm 仓,如果 package.json 中 peerDependencies 依赖 react 版本与项目 react 版本不一致会产生依赖冲突。npm 安装需要引入--legacy-peer-deps 标志绕过 peerDependencies 自动安装 + 进入到工程目录并输入以下命令: @@ -24,6 +26,12 @@ yarn add rn-placeholder ``` +#### **npm** + +```bash +npm install rn-placeholder +``` + 下面的代码展示了这个库的基本使用场景: @@ -64,7 +72,7 @@ It's the wrapper around all of the other components. Using alone will not produc **_Animations_** | 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | | --------- | -------------------------------------------------- | ------------- | -------- | -------- | -------- | -| Fade | AThis is the base animation that makes the placeholder become clearer on a specified interval| ComponentType | no | All | Yes | +| 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 | @@ -87,15 +95,17 @@ A PlaceholderLine is one of the two basic and visual components of a placeholder A PlaceholderMedia is the second of the two basic and visual components of a placeholder. It can be used a single placeholder like following: -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------- | -------------------------------------------------------- | ------ | -------- | -------- | -------- | -| 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 | string | no | All | Yes | -| color | The media color, default is #efefef | number | no | All | Yes | -| style | Customize the style of the underlying View component | object | no | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------- | -------------------------------------------------------- | ------- | -------- | -------- | -------- | +| 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 | ## 遗留问题 +- [ ] package.json 中 peerDependencies 依赖 react 版本与项目 react 版本不一致会产生依赖冲突,此问题只会导致 npm 安装依赖报错,不对组件功能造成影响。源库此问题 issues: [issue#226](https://github.com/mfrachet/rn-placeholder/issues/226) + ## 其他 ## 开源协议 -- Gitee From 01857eff86b25ee88903e28240e9f4d49a3d1cfa Mon Sep 17 00:00:00 2001 From: fzxlzy <810528574@qq.com> Date: Fri, 5 Jan 2024 16:29:40 +0800 Subject: [PATCH 2/5] =?UTF-8?q?[Issues:=20#I8TSZT]=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E4=B8=BA0.1.2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/rn-placeholder.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/zh-cn/rn-placeholder.md b/zh-cn/rn-placeholder.md index 8b72d8a7..966b7d44 100644 --- a/zh-cn/rn-placeholder.md +++ b/zh-cn/rn-placeholder.md @@ -1,4 +1,4 @@ -> 模板版本:v0.0.1 +> 模板版本:v0.1.2

rn-placeholder

@@ -12,6 +12,8 @@

+> [!tip] [Github 地址](https://github.com/mfrachet/rn-placeholder) + ## 安装与使用 > [!tip] 因原作者未发布最新的组件版本到 npm 仓,如果 package.json 中 peerDependencies 依赖 react 版本与项目 react 版本不一致会产生依赖冲突。npm 安装需要引入--legacy-peer-deps 标志绕过 peerDependencies 自动安装 @@ -32,8 +34,6 @@ yarn add rn-placeholder npm install rn-placeholder ``` - - 下面的代码展示了这个库的基本使用场景: ```js @@ -57,6 +57,14 @@ const App = () => ( ); ``` +## 约束与限制 + +### 兼容性 + +在下述版本验证通过: + +ide:4.1.3.412,sdk:4.1.0.53,rom:204.1.0.52(C00E52R1P17log),rnoh:0.72.11 + ## 属性 **组件 Placeholder** -- Gitee From 5cce10124c15da3440129c0e9639911522bdcc72 Mon Sep 17 00:00:00 2001 From: fzxlzy <810528574@qq.com> Date: Fri, 5 Jan 2024 16:48:26 +0800 Subject: [PATCH 3/5] =?UTF-8?q?[Issues:=20#I8TSZT]=20=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0github=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/rn-placeholder.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/zh-cn/rn-placeholder.md b/zh-cn/rn-placeholder.md index 966b7d44..43d35dd3 100644 --- a/zh-cn/rn-placeholder.md +++ b/zh-cn/rn-placeholder.md @@ -67,6 +67,8 @@ ide:4.1.3.412,sdk:4.1.0.53,rom:204.1.0.52(C00E52R1P17log),rnoh:0.72.11 ## 属性 +Github链接:https://github.com/mfrachet/rn-placeholder + **组件 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: -- Gitee From 4599795b063d13e4585c4cd16c5d3d2e233d4493 Mon Sep 17 00:00:00 2001 From: fzxlzy <810528574@qq.com> Date: Fri, 5 Jan 2024 16:51:43 +0800 Subject: [PATCH 4/5] =?UTF-8?q?[Issues:=20#I8TSZT]=20=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0github=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/rn-placeholder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/rn-placeholder.md b/zh-cn/rn-placeholder.md index 43d35dd3..53cbe659 100644 --- a/zh-cn/rn-placeholder.md +++ b/zh-cn/rn-placeholder.md @@ -67,7 +67,7 @@ ide:4.1.3.412,sdk:4.1.0.53,rom:204.1.0.52(C00E52R1P17log),rnoh:0.72.11 ## 属性 -Github链接:https://github.com/mfrachet/rn-placeholder +详情见 [Placeholder 源库地址](https://github.com/mfrachet/rn-placeholder) **组件 Placeholder** -- Gitee From db7e546f88d51c137d743abf6fefe999839840dd Mon Sep 17 00:00:00 2001 From: fzxlzy <810528574@qq.com> Date: Fri, 5 Jan 2024 17:22:41 +0800 Subject: [PATCH 5/5] =?UTF-8?q?[Issues:=20#I8TSZT]=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=8E=AF=E5=A2=83=E7=89=88=E6=9C=AC=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/rn-placeholder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/rn-placeholder.md b/zh-cn/rn-placeholder.md index 53cbe659..fa41c40a 100644 --- a/zh-cn/rn-placeholder.md +++ b/zh-cn/rn-placeholder.md @@ -63,7 +63,7 @@ const App = () => ( 在下述版本验证通过: -ide:4.1.3.412,sdk:4.1.0.53,rom:204.1.0.52(C00E52R1P17log),rnoh:0.72.11 +1. IDE: Deveco Studio 4.1.3.412;SDK: OpenHarmony (Api11) 4.1.0.53;测试设备: Mate40 Pro (NOH-AN00);ROM: 2.0.0.52(SP22C00E52R1P17log);RNOH: 0.72.11; ## 属性 -- Gitee