From 72428f7ce2b9970de6fa47118f373f2ce6f5c247 Mon Sep 17 00:00:00 2001 From: Louis-C7 Date: Thu, 1 Feb 2024 16:15:37 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I90CZ5]=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=88=B00130=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/styled-system.md | 221 ---------------------------------------- zh-cn/styled-system.md | 225 +++++++++++++++++++++-------------------- 2 files changed, 115 insertions(+), 331 deletions(-) delete mode 100644 1224/styled-system.md diff --git a/1224/styled-system.md b/1224/styled-system.md deleted file mode 100644 index c81d9932..00000000 --- a/1224/styled-system.md +++ /dev/null @@ -1,221 +0,0 @@ -> 模板版本：v0.1.2 - -

-

styled-system

-

-

- - License - -

- -> [!tip] [Github 地址](https://github.com/styled-system/styled-system) - -## 安装与使用 - -进入到工程目录并输入以下命令： - -#### **yarn** - -```bash -yarn add styled-system@^5.1.5 -``` - - - -#### **npm** - -```bash -npm i styled-system@^5.1.5 -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import styled from 'styled-components' -import { space, layout, typography, color } from 'styled-system' - -// Add styled-system functions to your component -const Box = styled.div` - ${space} - ${layout} - ${typography} - ${color} -` -// width: 50% - - -// font-size: 20px (theme.fontSizes[4]) - - -// margin: 16px (theme.space[2]) - - -// padding: 32px (theme.space[3]) - - -// color - - -// color: #333 (theme.colors.gray[0]) - - -// background color - -``` - -## 约束与限制 - -### 兼容性 - -在下述版本验证通过： - -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 - -## 属性 - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -详情见 [styled-system 源库地址](https://github.com/styled-system/styled-system) - -**API space** - -| Name | Description | Type | Required | HarmonyOS Support | -| ------------- | ---------- | ---- | -------- | -------- | -| margin | 外边距 | prop | no | yes | -| marginTop | 上外边距 | prop | no | yes | -| marginRight | 右外边距 | prop | no | yes | -| marginLeft | 左外边距 | prop | no | yes | -| marginX | X 轴外边距 | prop | no | yes | -| marginY | Y 轴外边距 | prop | no | yes | -| padding | 内边距 | prop | no | yes | -| paddingTop | 上内边距 | prop | no | yes | -| paddingRight | 右内边距 | prop | no | yes | -| paddingLeft | 左内边距 | prop | no | yes | -| paddingBottom | 下内边距 | prop | no | yes | -| paddingX | X 轴内边距 | prop | no | yes | -| paddingY | Y 轴内边距 | prop | no | yes | - -**API color** - -| Name | Description | Type | Required | HarmonyOS Support | -| ----- | ------ | ---- | -------- | -------- | -| color | 颜色 | prop | no |yes | -| bg | 背景色 | prop | no | yes | - -**API typography** - -| Name | Description | Type | Required | HarmonyOS Support |Notes| -| ------------- | -------- | ---- | -------- | -------- |-------- | -| fontFamily | 字体系列 | prop | no | yes |与 Android、iOS效果一致，设置后均无效果 -| fontSize | 字号大小 | prop | no | yes | -| fontWeight | 字体权重 | prop | no | yes | -| lineHeight | 行高 | prop | no | yes | -| letterSpacing | 字符间距 | prop | no | yes | -| textAlign | 文本对齐 | prop | no | yes | -| fontStyle | 字体样式 | prop | no | yes | - -**API layout** - -| Name | Description | Type | Required | HarmonyOS Support | Notes | -| ------------- | -------- | ---- | -------- | -------- | ---------------------------------------- | -| width | 宽度 | prop | no | yes | -| height | 高度 | prop | no | yes | -| display | 显示类型 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| minWidth | 最小宽度 | prop | no | yes | -| minHeight | 最小高度 | prop | no | yes | -| maxHeight | 最大高度 | prop | no | yes | -| size | 大小 | prop | no | yes | -| verticalAlign | 垂直对齐 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| overflow | 溢出 | prop | no | yes | -| overflowX | X 轴溢出 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| overflowY | Y 轴溢出 | prop | no | yes |与 Android、iOS 效果一致，设置后均无效果 | - -**API flexbox** - -| Name | Description | Type | Required | HarmonyOS Support |Notes | -| -------------- | --------------------- | ---- | -------- | -------- | ---------------------------------------- | -| alignItems | 列内轴对齐项 | prop | no |yes | | -| alignContent | 列内轴对齐内容 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| justifyItems | 行内轴对齐项 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| justifyContent | 行内轴对齐内容 | prop | no | yes | -| flexWrap | 换行 | prop | no | yes | -| flexDirection | 弹性方向 | prop | no | yes | -| flex | 弹性布局 | prop | no | yes | -| flexGrow | 分配剩余空间比例 | prop | no | yes | -| flexShrink | 弹性收缩 | prop | no | yes | -| flexBasis | 弹性初始长度 | prop | no | yes | -| justifySelf | 行内对齐 | prop | no | yes | -| alignSelf | 对齐，覆盖 alignItems | prop | no | yes | -| order | 弹性布局顺序 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | - -**API border** - -| Name | Description | Type | Required | HarmonyOS Support | Notes | -| ----------------------- | ------------ | ---- | -------- | -------- | ---------------------------------------- | -| border | 边框 | prop | no | yes | -| borderWidth | 边框宽度 | prop | no | yes | -| borderStyle | 边框样式 | prop | no | yes | -| borderColor | 边框颜色 | prop | no | yes | -| borderRadius | 边框圆角 | prop | no | yes | -| borderTop | 上边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderTopWidth | 上边框宽度 | prop | no | yes | -| borderTopStyle | 上边框样式 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderTopColor | 上边框颜色 | prop | no | yes | -| borderTopLeftRadius | 上左边框圆角 | prop | no | yes | -| borderTopRightRadius | 上右边框圆角 | prop | no | yes | -| borderRight | 右边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderRightWidth | 右边框宽度 | prop | no | yes | -| borderRightStyle | 右边框样式 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderRightColor | 右边框颜色 | prop | no | yes | -| borderBottom | 下边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderBottomWidth | 下边框宽度 | prop | no | yes | -| borderBottomStyle | 下边框样式 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderBottomColor | 下边框颜色 | prop | no | yes | -| borderBottomLeftRadius | 左下边框圆角 | prop | no | yes | -| borderBottomRightRadius | 右下边框圆角 | prop | no | yes | -| borderLeft | 左边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderLeftWidth | 左边框宽度 | prop | no | yes | -| borderLeftStyle | 左边框样式 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderLeftColor | 左边框颜色 | prop | no | yes | -| borderX | X 轴边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| borderY | Y 轴边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | - -**API position** - -| Name | Description | Type | Required | HarmonyOS Support | -| -------- | ------------ | ---- | -------- | -------- | -| position | 定位 | prop | no | yes | -| zIndex | 元素堆叠顺序 | prop | no | yes | -| top | 上偏移量 | prop | no | yes | -| right | 右偏移量 | prop | no | yes | -| bottom | 下偏移量 | prop | no | yes | -| left | 左偏移量 | prop | no | yes | - -**API shadow** - -| Name | Description | Type | Required | HarmonyOS Support | -| ---------- | -------- | ---- | -------- | -------- | -| textShadow | 文本阴影 | prop | no | yes | -| boxShadow | 盒子阴影 | prop | no | yes | - -**API background** - -| Name | Description | Type | Required | HarmonyOS Support | Notes | -| ------------------ | ---------- | ---- | -------- | -------- | ---------------------------------------- | -| backgroundImage | 背景图片 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| backgroundSize | 背景尺寸 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| backgroundPosition | 背景定位 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | -| backgroundRepeat | 背景图平铺 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/styled-system/styled-system/blob/master/LICENSE.md) ，请自由地享受和参与开源。 diff --git a/zh-cn/styled-system.md b/zh-cn/styled-system.md index f09118c7..838eb9cc 100644 --- a/zh-cn/styled-system.md +++ b/zh-cn/styled-system.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

styled-system

@@ -9,7 +9,7 @@

->[!tip] [Github 地址](https://github.com/styled-system/styled-system) +> [!tip] [Github 地址](https://github.com/styled-system/styled-system) ## 安装与使用 @@ -18,14 +18,15 @@ #### **yarn** ```bash -yarn add styled-system +yarn add styled-system@^5.1.5 ``` + #### **npm** ```bash -npm i styled-system +npm i styled-system@^5.1.5 ``` @@ -69,143 +70,147 @@ const Box = styled.div` ### 兼容性 - 在下述版本验证通过： +本文档内容基于以下版本验证通过： - 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 +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52(SP22C00E52R1P17log); ## 属性 -详情见 [styled-system源库地址](https://github.com/styled-system/styled-system) +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情见 [styled-system 源库地址](https://github.com/styled-system/styled-system) **API space** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---- | ---- | ---- | -------- | -------- | -------- | -| margin | 外边距 | prop | No | / | Yes | -| marginTop | 上外边距 | prop | No | / | Yes | -| marginRight | 右外边距 | prop | No | / | Yes | -| marginLeft | 左外边距 | prop | No | / | Yes | -| marginX | X轴外边距 | prop | No | / | Yes | -| marginY | Y轴外边距 | prop | No | / | Yes | -| padding |内边距 |prop | No | / | Yes | -| paddingTop | 上内边距| prop | No | / | Yes | -| paddingRight | 右内边距 | prop | No | / | Yes | -| paddingLeft | 左内边距 | prop | No | / | Yes | -| paddingBottom |下内边距 | prop | No | / | Yes | -| paddingX | X轴内边距 | prop | No | / | Yes | -| paddingY | Y轴内边距 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | +| ------------- | ---------- | ---- | -------- | -------- | +| margin | 外边距 | prop | no | yes | +| marginTop | 上外边距 | prop | no | yes | +| marginRight | 右外边距 | prop | no | yes | +| marginLeft | 左外边距 | prop | no | yes | +| marginX | X 轴外边距 | prop | no | yes | +| marginY | Y 轴外边距 | prop | no | yes | +| padding | 内边距 | prop | no | yes | +| paddingTop | 上内边距 | prop | no | yes | +| paddingRight | 右内边距 | prop | no | yes | +| paddingLeft | 左内边距 | prop | no | yes | +| paddingBottom | 下内边距 | prop | no | yes | +| paddingX | X 轴内边距 | prop | no | yes | +| paddingY | Y 轴内边距 | prop | no | yes | **API color** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---- | ---- | ---- | -------- | -------- | -------- | -| color | 颜色| prop | No | / | Yes | -| bg | 背景色 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | +| ----- | ------ | ---- | -------- | -------- | +| color | 颜色 | prop | no |yes | +| bg | 背景色 | prop | no | yes | **API typography** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---- | ---- | ---- | -------- | -------- | -------- | -| fontFamily | 字体系列 | prop | No | / | Yes | -| fontSize | 字号大小 | prop | No | / | Yes | -| fontWeight | 字体权重 | prop | No | / | Yes | -| lineHeight | 行高 | prop | No | / | Yes | -| letterSpacing | 字符间距 | prop | No | / | Yes | -| textAlign | 文本对齐 | prop | No | / | Yes | -| fontStyle | 字体样式 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support |Notes| +| ------------- | -------- | ---- | -------- | -------- |-------- | +| fontFamily | 字体系列 | prop | no | yes |与 Android、iOS效果一致，设置后均无效果 +| fontSize | 字号大小 | prop | no | yes | +| fontWeight | 字体权重 | prop | no | yes | +| lineHeight | 行高 | prop | no | yes | +| letterSpacing | 字符间距 | prop | no | yes | +| textAlign | 文本对齐 | prop | no | yes | +| fontStyle | 字体样式 | prop | no | yes | **API layout** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |备注 | -| ---- | ---- | ---- | -------- | -------- | -------- |-------- | -| width | 宽度 | prop | No | / | Yes | -| height | 高度 | prop | No | / | Yes | -| display | 显示类型 | prop | No | / |Yes| 与android、ios效果一致，设置后均无效果 | -| minWidth | 最小宽度 | prop | No | / | Yes | -| minHeight | 最小高度 | prop | No | / | Yes | -| maxHeight |最大高度 | prop | No | / | Yes | -| size | 大小 | prop | No | / | Yes | -| verticalAlign | 垂直对齐 | prop | No | / |Yes| 与android、ios效果一致，设置后均无效果 | -| overflow | 溢出 | prop | No | / | Yes | -| overflowX | X轴溢出 | prop | No | / | Yes | -| overflowY | Y轴溢出 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| ------------- | -------- | ---- | -------- | -------- | ---------------------------------------- | +| width | 宽度 | prop | no | yes | +| height | 高度 | prop | no | yes | +| display | 显示类型 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| minWidth | 最小宽度 | prop | no | yes | +| minHeight | 最小高度 | prop | no | yes | +| maxHeight | 最大高度 | prop | no | yes | +| size | 大小 | prop | no | yes | +| verticalAlign | 垂直对齐 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| overflow | 溢出 | prop | no | yes | +| overflowX | X 轴溢出 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| overflowY | Y 轴溢出 | prop | no | yes |与 Android、iOS 效果一致，设置后均无效果 | **API flexbox** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注| -| ---- | ---- | ---- | -------- | -------- | -------- |-------- | -| alignItems | 列内轴对齐项 | prop | No | / | Yes | | -| alignContent | 列内轴对齐内容 | prop | No | / | Yes|与android、ios效果一致，设置后均无效果 | -| justifyItems | 行内轴对齐项 | prop | No | / | Yes|与android、ios效果一致，设置后均无效果 | -| justifyContent | 行内轴对齐内容 | prop | No | / | Yes | -| flexWrap | 换行 | prop | No | / | Yes | -| flexDirection | 弹性方向 | prop | No | / | Yes | -| flex | 弹性布局 | prop | No | / | Yes | -| flexGrow | 分配剩余空间比例 | prop | No | / | Yes | -| flexShrink | 弹性收缩 | prop | No | / | Yes | -| flexBasis | 弹性初始长度 | prop | No | / | Yes | -| justifySelf | 行内对齐 | prop | No | / | Yes | -| alignSelf | 对齐，覆盖alignItems | prop | No | / | Yes | -| order | 弹性布局顺序 | prop | No | / |Yes| 与android、ios效果一致，设置后均无效果 | +| Name | Description | Type | Required | HarmonyOS Support |Notes | +| -------------- | --------------------- | ---- | -------- | -------- | ---------------------------------------- | +| alignItems | 列内轴对齐项 | prop | no |yes | | +| alignContent | 列内轴对齐内容 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| justifyItems | 行内轴对齐项 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| justifyContent | 行内轴对齐内容 | prop | no | yes | +| flexWrap | 换行 | prop | no | yes | +| flexDirection | 弹性方向 | prop | no | yes | +| flex | 弹性布局 | prop | no | yes | +| flexGrow | 分配剩余空间比例 | prop | no | yes | +| flexShrink | 弹性收缩 | prop | no | yes | +| flexBasis | 弹性初始长度 | prop | no | yes | +| justifySelf | 行内对齐 | prop | no | yes | +| alignSelf | 对齐，覆盖 alignItems | prop | no | yes | +| order | 弹性布局顺序 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | **API border** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注| -| ---- | ---- | ---- | -------- | -------- | -------- |-------- | -| border | 边框 | prop | No | / | Yes | -| borderWidth | 边框宽度 | prop | No | / | Yes | -| borderStyle | 边框样式 | prop | No | / | Yes | -| borderColor | 边框颜色 | prop | No | / | Yes | -| borderRadius | 边框圆角 | prop | No | / | Yes | -| borderTop | 上边框 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | -| borderTopWidth | 上边框宽度 | prop | No | / | Yes | -| borderTopStyle | 上边框样式 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | -| borderTopColor | 上边框颜色 | prop | No | / | Yes | -| borderTopLeftRadius | 上左边框圆角 | prop | No | / | Yes | -| borderTopRightRadius | 上右边框圆角 | prop | No | / | Yes | -| borderRight | 右边框 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | -| borderRightWidth | 右边框宽度 | prop | No | / | Yes | -| borderRightStyle |右边框样式 | prop | No | / |Yes | 与android、ios效果一致，设置后均无效果 | -| borderRightColor | 右边框颜色 | prop | No | / | Yes | -| borderBottom | 下边框 | prop | No | / | Yes | 与android、ios效果一致，设置后均无效果 | -| borderBottomWidth |下边框宽度 | prop | No | / | Yes | -| borderBottomStyle |下边框样式 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | -| borderBottomColor | 下边框颜色 | prop | No | / | Yes | -| borderBottomLeftRadius | 左下边框圆角 | prop | No | / | Yes | -| borderBottomRightRadius | 右下边框圆角 | prop | No | / | Yes | -| borderLeft | 左边框 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | -| borderLeftWidth | 左边框宽度 | prop | No | / | Yes | -| borderLeftStyle | 左边框样式 | prop | No | / |Yes | 与android、ios效果一致，设置后均无效果 | -| borderLeftColor | 左边框颜色 | prop | No | / | Yes | -| borderX | X轴边框 | prop | No | / |Yes | 与android、ios效果一致，设置后均无效果 | -| borderY |Y轴边框 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| ----------------------- | ------------ | ---- | -------- | -------- | ---------------------------------------- | +| border | 边框 | prop | no | yes | +| borderWidth | 边框宽度 | prop | no | yes | +| borderStyle | 边框样式 | prop | no | yes | +| borderColor | 边框颜色 | prop | no | yes | +| borderRadius | 边框圆角 | prop | no | yes | +| borderTop | 上边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderTopWidth | 上边框宽度 | prop | no | yes | +| borderTopStyle | 上边框样式 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderTopColor | 上边框颜色 | prop | no | yes | +| borderTopLeftRadius | 上左边框圆角 | prop | no | yes | +| borderTopRightRadius | 上右边框圆角 | prop | no | yes | +| borderRight | 右边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderRightWidth | 右边框宽度 | prop | no | yes | +| borderRightStyle | 右边框样式 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderRightColor | 右边框颜色 | prop | no | yes | +| borderBottom | 下边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderBottomWidth | 下边框宽度 | prop | no | yes | +| borderBottomStyle | 下边框样式 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderBottomColor | 下边框颜色 | prop | no | yes | +| borderBottomLeftRadius | 左下边框圆角 | prop | no | yes | +| borderBottomRightRadius | 右下边框圆角 | prop | no | yes | +| borderLeft | 左边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderLeftWidth | 左边框宽度 | prop | no | yes | +| borderLeftStyle | 左边框样式 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderLeftColor | 左边框颜色 | prop | no | yes | +| borderX | X 轴边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| borderY | Y 轴边框 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | **API position** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注| -| ---- | ---- | ---- | -------- | -------- | -------- |-------- | -| position | 定位 | prop | No | / | Yes | -| zIndex | 元素堆叠顺序 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | -| top | 上偏移量 | prop | No | / | Yes | -| right | 右偏移量 | prop | No | / | Yes | -| bottom | 下偏移量 | prop | No | / | Yes | -| left | 左偏移量 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | +| -------- | ------------ | ---- | -------- | -------- | +| position | 定位 | prop | no | yes | +| zIndex | 元素堆叠顺序 | prop | no | yes | +| top | 上偏移量 | prop | no | yes | +| right | 右偏移量 | prop | no | yes | +| bottom | 下偏移量 | prop | no | yes | +| left | 左偏移量 | prop | no | yes | **API shadow** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |备注| -| ---- | ---- | ---- | -------- | -------- | -------- |-------- | -| textShadow | 文本阴影 | prop | No | / | Yes | -| boxShadow | 盒子阴影 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | +| Name | Description | Type | Required | HarmonyOS Support | +| ---------- | -------- | ---- | -------- | -------- | +| textShadow | 文本阴影 | prop | no | yes | +| boxShadow | 盒子阴影 | prop | no | yes | **API background** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |备注| -| ---- | ---- | ---- | -------- | -------- | -------- |-------- | -| backgroundImage | 背景图片 | prop | No | / |Yes | 与android、ios效果一致，设置后均无效果 | -| backgroundSize | 背景尺寸 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | -| backgroundPosition | 背景定位 | prop | No | / |Yes | 与android、ios效果一致，设置后均无效果 | -| backgroundRepeat | 背景图平铺 | prop | No | / | Yes |与android、ios效果一致，设置后均无效果 | +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| ------------------ | ---------- | ---- | -------- | -------- | ---------------------------------------- | +| backgroundImage | 背景图片 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| backgroundSize | 背景尺寸 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| backgroundPosition | 背景定位 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | +| backgroundRepeat | 背景图平铺 | prop | no | yes | 与 Android、iOS 效果一致，设置后均无效果 | ## 遗留问题 -- Gitee From e3c0edf35616b0c99fafd2458b50acc5d46275e7 Mon Sep 17 00:00:00 2001 From: Louis-C7 Date: Thu, 1 Feb 2024 17:06:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I90CZ5]=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=88=B00130=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/styled-components.md | 97 --------------- ...act-native-async-storage-async-storage.md} | 30 +++-- ...er.md => react-native-community-slider.md} | 110 +++++++++--------- ...icker.md => react-native-picker-picker.md} | 63 +++++----- zh-cn/react-native-view-shot.md | 26 +++-- zh-cn/styled-components.md | 51 ++++---- zh-cn/styled-system.md | 12 +- 7 files changed, 154 insertions(+), 235 deletions(-) delete mode 100644 1224/styled-components.md rename zh-cn/{async-storage.md => react-native-async-storage-async-storage.md} (92%) rename zh-cn/{react-native-slider.md => react-native-community-slider.md} (84%) rename zh-cn/{picker.md => react-native-picker-picker.md} (87%) diff --git a/1224/styled-components.md b/1224/styled-components.md deleted file mode 100644 index 60027783..00000000 --- a/1224/styled-components.md +++ /dev/null @@ -1,97 +0,0 @@ -> 模板版本：v0.1.2 - -

-

styled-components

-

-

- - License - -

- -> [!tip] [Github 地址](https://github.com/styled-components/styled-components) - -## 安装与使用 - -进入到工程目录并输入以下命令： - -#### **yarn** - -```bash -yarn add styled-components@^6.1.1 -``` - - - -#### **npm** - -```bash -npm install styled-components@^6.1.1 -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import React from "react"; - -import styled from "styled-components"; - -// Create a react component that renders an <h1> which is -// centered, palevioletred and sized at 1.5em -const Title = styled.h1` - font-size: 1.5em; - text-align: center; - color: palevioletred; -`; - -// Create a <Wrapper> react component that renders a <section> with -// some padding and a papayawhip background -const Wrapper = styled.section` - padding: 4em; - background: papayawhip; -`; - -function MyUI() { - return ( - // Use them like any other React component – except they're styled! - <Wrapper> - <Title>Hello World, this is my first styled component! - - ); -} -``` - -## 约束与限制 - -### 兼容性 - -在下述版本验证通过： - -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 - -## 属性 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -详情见 [styled-components 源库地址](https://github.com/styled-components/styled-components) - -| Name | Description | Type | Required | HarmonyOS Support | -| ------------- | ---------- | ---- | -------- | -------- | -| ThemeProvider | A helper component for theming. | component | no | yes | -| css | The css prop is a convenient way to iterate on your components without settling on fixed component boundaries yet | prop | no | yes | -| toStyleSheet | convert a style object to a stylesheet object | function |no | yes | -| ThemeContext | access the theme object and pass the theme object to the style component | jsx component | no | yes | -| isStyledComponent | A utility to help identify styled components. | function | no | yes | -| withTheme | This is a higher order component factory to get the current theme from a ThemeProvider and pass it to your component as a theme prop. | function | no | yes | -| useTheme | This is a custom hook to get the current theme from a ThemeProvider. | function | no | yes | -| ThemeConsumer | It passes the current theme (based on a ThemeProvider higher in your component tree) as an argument to the child function. From this function, you may return further JSX or nothing. | jsx component |no | yes | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/styled-components/styled-components/blob/main/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/async-storage.md b/zh-cn/react-native-async-storage-async-storage.md similarity index 92% rename from zh-cn/async-storage.md rename to zh-cn/react-native-async-storage-async-storage.md index 08f4c0bd..29093ff1 100644 --- a/zh-cn/async-storage.md +++ b/zh-cn/react-native-async-storage-async-storage.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

@react-native-async-storage/async-storage

@@ -12,32 +12,36 @@

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/async-storage/releases) +> [!tip] [Github 地址](https://github.com/react-native-oh-library/async-storage) ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/async-storage> Releases](https://github.com/react-native-oh-library/async-storage/releases)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： - +>[!TIP] # 处替换为 tgz 包的路径 -**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/async-storage/releases)中获取库 tgz，通过使用本地依赖来安装本库。** + -#### **yarn** +#### **npm** ```bash -yarn add @react-native-async-storage/async-storage@npm:@react-native-oh-library/async-storage +npm install @react-native-oh-tpl/async-storage@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install @react-native-async-storage/async-storage@npm:@react-native-oh-library/async-storage +yarn add @react-native-oh-tpl/async-storage@file:# ``` 下面的代码展示了这个库的基本使用场景： +>[!WARNING] 使用时 import 的库名不变。 + ```js import AsyncStorage from "@react-native-async-storage/async-storage"; @@ -77,12 +81,15 @@ const getData = async () => { 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-async-storage": "file:../../node_modules/@react-native-async-storage/async-storage/harmony/async_storage.har" + "rnoh-async-storage": "file:../../node_modules/@react-native-oh-tpl/async-storage/harmony/async_storage.har" } ``` @@ -96,12 +103,15 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-async-storage": "file:../../node_modules/@react-native-async-storage/async-storage/harmony/async-storage" + "rnoh-async-storage": "file:../../node_modules/@react-native-oh-tpl/async-storage/harmony/async-storage" } ``` diff --git a/zh-cn/react-native-slider.md b/zh-cn/react-native-community-slider.md similarity index 84% rename from zh-cn/react-native-slider.md rename to zh-cn/react-native-community-slider.md index 15b9d8c8..c006d7e9 100644 --- a/zh-cn/react-native-slider.md +++ b/zh-cn/react-native-community-slider.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.3

@react-native-community/slider

@@ -12,36 +12,35 @@

-## 安装与使用 - -> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-slider) -在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 +## 安装与使用 -```bash -@react-native-oh-library:registry=https://npm.pkg.github.com -//npm.pkg.github.com/:_authToken=TOKEN -``` +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/slider Releases](https://github.com/react-native-oh-library/react-native-slider/releases)，并下载适用版本的 tgz 包。 进入到工程目录并输入以下命令： +> [!TIP] # 处替换为 tgz 包的路径 + -#### **yarn** +#### **npm** ```bash -yarn add @react-native-community/slider@npm:@react-native-oh-library/slider +npm install @react-native-oh-tpl/slider@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install @react-native-community/slider@npm:@react-native-oh-library/slider +yarn add @react-native-oh-tpl/slider@file:# ``` -下面的代码展示了这个库的基本使用场景： +快速使用： + +> [!WARNING] 使用时 import 的库名不变。 ```js import Slider from "@react-native-community/slider"; @@ -69,12 +68,15 @@ import Slider from "@react-native-community/slider"; 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-slider": "file:../../node_modules/@react-native-community/slider/harmony/slider.har" + "rnoh-slider": "file:../../node_modules/@react-native-oh-tpl/slider/harmony/slider.har" } ``` @@ -88,12 +90,15 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-slider": "file:../../node_modules/@react-native-community/slider/harmony/slider" + "rnoh-slider": "file:../../node_modules/@react-native-oh-tpl/slider/harmony/slider" } ``` @@ -157,31 +162,24 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/pages/index.ets`，添加： ```diff -import { - RNApp, - ComponentBuilderContext, - RNAbility, - AnyJSBundleProvider, - MetroJSBundleProvider, - ResourceJSBundleProvider, -} from 'rnoh' +... import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" import { createRNPackages } from '../RNPackagesFactory' + import { RNCSlider, SLIDER_TYPE } from "rnoh-slider" @Builder function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, + tag: ctx.tag, buildCustomComponent: CustomComponentBuilder }) } -+ else if (ctx.descriptor.type === SLIDER_TYPE) { ++ else if (ctx.componentName === SLIDER_TYPE) { + RNCSlider({ + ctx: ctx.rnohContext, -+ tag: ctx.descriptor.tag, ++ tag: ctx.tag, + buildCustomComponent: CustomComponentBuilder + }) + } @@ -211,32 +209,36 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | ------------ | -------- | -| `style` | Used to style and layout the `Slider`. See `StyleSheet.js` and `ViewStylePropTypes.js` for more info. | View.style | No | All | yes | -| `disabled` | If true the user won't be able to move the slider.
Default value is false. | bool | No | All | yes | -| `maximumValue` | Initial maximum value of the slider.
Default value is 1. | number | No | All | yes | -| `minimumTrackTintColor` | The color used for the track to the left of the button.
Overrides the default blue gradient image on iOS. | [color](https://reactnative.dev/docs/colors) | No | All | yes | -| `minimumValue` | Initial minimum value of the slider.
Default value is 0. | number | No | All | yes | -| `lowerLimit` | Slide lower limit. The user won't be able to slide below this limit. | number | No | Android, iOS | no | -| `upperLimit` | Slide upper limit. The user won't be able to slide above this limit. | number | No | Android, iOS | no | -| `onSlidingStart` | Callback that is called when the user picks up the slider.
The initial value is passed as an argument to the callback handler. | function | No | All | yes | -| `onSlidingComplete` | Callback that is called when the user releases the slider, regardless if the value has changed.
The current value is passed as an argument to the callback handler. | function | No | All | yes | -| `onValueChange` | Callback continuously called while the user is dragging the slider. | function | No | All | yes | -| `step` | Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0.
On Windows OS the default value is 1% of slider's range (from `minimumValue` to `maximumValue`). | number | No | All | yes | -| `maximumTrackTintColor` | The color used for the track to the right of the button.
Overrides the default gray gradient image on iOS. | [color](https://reactnative.dev/docs/colors) | No | All | yes | -| `testID` | Used to locate this view in UI automation tests. | string | No | All | yes | -| `value` | Write-only property representing the value of the slider. Can be used to programmatically control the position of the thumb. Entered once at the beginning still acts as an initial value. Changing the value programmatically does not trigger any event.
The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0.
_This is not a controlled component_, you don't need to update the value during dragging. | number | No | All | yes | -| `tapToSeek` | Permits tapping on the slider track to set the thumb position.
Defaults to false on iOS. No effect on Android or Windows. | bool | No | iOS | no | -| `inverted` | Reverses the direction of the slider.
Default value is false. | bool | No | All | yes | -| `vertical` | Changes the orientation of the slider to vertical, if set to `true`.
Default value is false. | bool | No | Windows | yes | -| `thumbTintColor` | Color of the foreground switch grip.
**NOTE:** This prop will override the `thumbImage` prop set, meaning that if both `thumbImage` and `thumbTintColor` will be set, image used for the thumb may not be displayed correctly! | [color](https://reactnative.dev/docs/colors) | No | Android | yes | -| `maximumTrackImage` | Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. | Image
.propTypes
.source | No | iOS | no | -| `minimumTrackImage` | Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. | Image
.propTypes
.source | No | iOS | no | -| `thumbImage` | Sets an image for the thumb. Only static images are supported. Needs to be a URI of a local or network image; base64-encoded SVG is not supported. | Image
.propTypes
.source | No | All | yes | -| `trackImage` | Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. | Image
.propTypes
.source | No | iOS | no | -| `ref` | Reference object. | MutableRefObject | No | web | no | -| `View` | [Inherited `View` props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props) | | | | +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Type | Platform | HarmonyOS Support | +| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---- | ------------ | ----------------- | +| `style` | Used to style and layout the `Slider`. See `StyleSheet.js` and `ViewStylePropTypes.js` for more info. | View.style | No | All | yes | +| `disabled` | If true the user won't be able to move the slider.
Default value is false. | bool | No | All | yes | +| `maximumValue` | Initial maximum value of the slider.
Default value is 1. | number | No | All | yes | +| `minimumTrackTintColor` | The color used for the track to the left of the button.
Overrides the default blue gradient image on iOS. | [color](https://reactnative.dev/docs/colors) | No | All | yes | +| `minimumValue` | Initial minimum value of the slider.
Default value is 0. | number | No | All | yes | +| `lowerLimit` | Slide lower limit. The user won't be able to slide below this limit. | number | No | Android, iOS | no | +| `upperLimit` | Slide upper limit. The user won't be able to slide above this limit. | number | No | Android, iOS | no | +| `onSlidingStart` | Callback that is called when the user picks up the slider.
The initial value is passed as an argument to the callback handler. | function | No | All | yes | +| `onSlidingComplete` | Callback that is called when the user releases the slider, regardless if the value has changed.
The current value is passed as an argument to the callback handler. | function | No | All | yes | +| `onValueChange` | Callback continuously called while the user is dragging the slider. | function | No | All | yes | +| `step` | Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0.
On Windows OS the default value is 1% of slider's range (from `minimumValue` to `maximumValue`). | number | No | All | yes | +| `maximumTrackTintColor` | The color used for the track to the right of the button.
Overrides the default gray gradient image on iOS. | [color](https://reactnative.dev/docs/colors) | No | All | yes | +| `testID` | Used to locate this view in UI automation tests. | string | No | All | yes | +| `value` | Write-only property representing the value of the slider. Can be used to programmatically control the position of the thumb. Entered once at the beginning still acts as an initial value. Changing the value programmatically does not trigger any event.
The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0.
_This is not a controlled component_, you don't need to update the value during dragging. | number | No | All | yes | +| `tapToSeek` | Permits tapping on the slider track to set the thumb position.
Defaults to false on iOS. No effect on Android or Windows. | bool | No | iOS | no | +| `inverted` | Reverses the direction of the slider.
Default value is false. | bool | No | All | yes | +| `vertical` | Changes the orientation of the slider to vertical, if set to `true`.
Default value is false. | bool | No | Windows | yes | +| `thumbTintColor` | Color of the foreground switch grip.
**NOTE:** This prop will override the `thumbImage` prop set, meaning that if both `thumbImage` and `thumbTintColor` will be set, image used for the thumb may not be displayed correctly! | [color](https://reactnative.dev/docs/colors) | No | Android | yes | +| `maximumTrackImage` | Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. | Image
.propTypes
.source | No | iOS | no | +| `minimumTrackImage` | Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. | Image
.propTypes
.source | No | iOS | no | +| `thumbImage` | Sets an image for the thumb. Only static images are supported. Needs to be a URI of a local or network image; base64-encoded SVG is not supported. | Image
.propTypes
.source | No | All | yes | +| `trackImage` | Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. | Image
.propTypes
.source | No | iOS | no | +| `ref` | Reference object. | MutableRefObject | No | web | no | +| `View` | [Inherited `View` props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props) | | | | ## 遗留问题 diff --git a/zh-cn/picker.md b/zh-cn/react-native-picker-picker.md similarity index 87% rename from zh-cn/picker.md rename to zh-cn/react-native-picker-picker.md index 165d0b28..8c8f953d 100644 --- a/zh-cn/picker.md +++ b/zh-cn/react-native-picker-picker.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.3

@react-native-picker/picker

@@ -14,35 +14,32 @@ ## 安装与使用 -> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 - -在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 - -```bash -@react-native-oh-library:registry=https://npm.pkg.github.com -//npm.pkg.github.com/:_authToken=TOKEN -``` +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases)，并下载适用版本的 tgz 包。 进入到工程目录并输入以下命令： +> [!TIP] # 处替换为 tgz 包的路径 + -#### **yarn** +#### **npm** ```bash -yarn add @react-native-picker/picker@npm:@react-native-oh-library/picker +npm install @react-native-oh-tpl/picker@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install @react-native-picker/picker@npm:@react-native-oh-library/picker +yarn add @react-native-oh-tpl/picker@file:# ``` 下面的代码展示了这个库的基本使用场景： +> [!WARNING] 使用时 import 的库名不变。 + ```js import { Picker } from "@react-native-picker/picker"; @@ -71,12 +68,15 @@ const [selectedLanguage, setSelectedLanguage] = useState(); 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-slider": "file:../../node_modules/@react-native-picker/picker/harmony/picker.har" + "rnoh-picker": "file:../../node_modules/@react-native-oh-tpl/picker/harmony/picker.har" } ``` @@ -90,12 +90,15 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-slider": "file:../../node_modules/@react-native-picker/picker/harmony/picker" + "rnoh-picker": "file:../../node_modules/@react-native-oh-tpl/picker/harmony/picker" } ``` @@ -142,14 +145,14 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ```diff #include "RNOH/PackageProvider.h" #include "SamplePackage.h" -+ #include "HarmonyPickerPackage.h" ++ #include "PickerPackage.h" using namespace rnoh; std::vector> PackageProvider::getPackages(Package::Context ctx) { return { std::make_shared(ctx), -+ std::make_shared(ctx) ++ std::make_shared(ctx) }; } ``` @@ -159,32 +162,22 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/pages/index.ets`，添加： ```diff -import { - RNApp, - ComponentBuilderContext, - RNAbility, - AnyJSBundleProvider, - MetroJSBundleProvider, - ResourceJSBundleProvider, -} from 'rnoh' -import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -import { createRNPackages } from '../RNPackagesFactory' -+ import { RNCHarmonyPicker, HARMONY_PICKER_TYPE } from "rnoh-picker" +... ++ import { RNCPicker, PICKER_TYPE } from "rnoh-picker" @Builder function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, + tag: ctx.tag, buildCustomComponent: CustomComponentBuilder }) } -+ else if (ctx.descriptor.type === HARMONY_PICKER_TYPE) { -+ RNCHarmonyPicker({ ++ else if (ctx.componentName === PICKER_TYPE) { ++ RNCPicker({ + ctx: ctx.rnohContext, -+ tag: ctx.descriptor.tag, -+ buildCustomComponent: CustomComponentBuilder ++ tag: ctx.tag + }) + } ... @@ -200,7 +193,7 @@ import { createRNPackages } from '../RNPackagesFactory' 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-picker/picker Releases](https://github.com/react-native-oh-library/picker/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases) ## 属性 diff --git a/zh-cn/react-native-view-shot.md b/zh-cn/react-native-view-shot.md index 43fd6178..5b1a5d5a 100644 --- a/zh-cn/react-native-view-shot.md +++ b/zh-cn/react-native-view-shot.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

react-native-view-shot

@@ -16,27 +16,31 @@ ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/react-native-view-shot> Releases](https://github.com/react-native-oh-library/react-native-view-shot/releases)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： - +>[!TIP] # 处替换为 tgz 包的路径 -**正在 npm 发布中，当前请先从仓库[Releases](https://github.com/react-native-oh-library/react-native-view-shot/releases)中获取库 tgz，通过使用本地依赖来安装本库。** + -#### **yarn** +#### **npm** ```bash -yarn add xxx +npm install @react-native-oh-tpl/react-native-view-shot@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install xxx +yarn add @react-native-oh-tpl/react-native-view-shot@file:# ``` -快速使用： +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 ```js import React from "react"; @@ -94,6 +98,9 @@ export default function App() { 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json @@ -113,6 +120,9 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json diff --git a/zh-cn/styled-components.md b/zh-cn/styled-components.md index d3784285..b3dacd08 100644 --- a/zh-cn/styled-components.md +++ b/zh-cn/styled-components.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

styled-components

@@ -9,23 +9,24 @@

->[!tip] [Github 地址](https://github.com/styled-components/styled-components) +> [!tip] [Github 地址](https://github.com/styled-components/styled-components) ## 安装与使用 进入到工程目录并输入以下命令： -#### **yarn** + + +#### **npm** ```bash -yarn add styled-components +npm install styled-components@6.1.8 ``` - -#### **npm** +#### **yarn** ```bash -npm install styled-components +yarn add styled-components@6.1.8 ``` @@ -33,9 +34,9 @@ npm install styled-components 下面的代码展示了这个库的基本使用场景： ```js -import React from 'react'; +import React from "react"; -import styled from 'styled-components'; +import styled from "styled-components"; // Create a react component that renders an <h1> which is // centered, palevioletred and sized at 1.5em @@ -66,26 +67,26 @@ function MyUI() { ### 兼容性 - 在下述版本验证通过： +本文档内容基于以下版本验证通过： - 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 +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52(SP22C00E52R1P17log); ## 属性 -详情见 [styled-components源库地址](https://github.com/styled-components/styled-components) - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---- | ---- | ---- | -------- | -------- | -------- | -| ThemeProvider | A helper component for theming. | component | No | / | Yes | -| css | The css prop is a convenient way to iterate on your components without settling on fixed component boundaries yet | prop | No | / | Yes | -| toStyleSheet | convert a style object to a stylesheet object | function | No | / | Yes | -| ThemeContext | access the theme object and pass the theme object to the style component | jsx component | No | / | Yes | -| isStyledComponent | A utility to help identify styled components. | function | No | / | Yes | -| withTheme | This is a higher order component factory to get the current theme from a ThemeProvider and pass it to your component as a theme prop. | function | No | / | Yes | -| useTheme | This is a custom hook to get the current theme from a ThemeProvider. | function | No | / | Yes | -| ThemeConsumer | It passes the current theme (based on a ThemeProvider higher in your component tree) as an argument to the child function. From this function, you may return further JSX or nothing. |jsx component | No | / | Yes | -| createGlobalstyle | A helper function to generate a special StyledComponent that handles global styles| function | No | Web | No | -| keyframes | A helper method to create keyframes for animations. | function | No | Web | No | +详情见 [styled-components 源库地址](https://github.com/styled-components/styled-components) + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | -------- | -------- | +| ThemeProvider | A helper component for theming. | component | No | / | Yes | +| css | The css prop is a convenient way to iterate on your components without settling on fixed component boundaries yet | prop | No | / | Yes | +| toStyleSheet | convert a style object to a stylesheet object | function | No | / | Yes | +| ThemeContext | access the theme object and pass the theme object to the style component | jsx component | No | / | Yes | +| isStyledComponent | A utility to help identify styled components. | function | No | / | Yes | +| withTheme | This is a higher order component factory to get the current theme from a ThemeProvider and pass it to your component as a theme prop. | function | No | / | Yes | +| useTheme | This is a custom hook to get the current theme from a ThemeProvider. | function | No | / | Yes | +| ThemeConsumer | It passes the current theme (based on a ThemeProvider higher in your component tree) as an argument to the child function. From this function, you may return further JSX or nothing. | jsx component | No | / | Yes | +| createGlobalstyle | A helper function to generate a special StyledComponent that handles global styles | function | No | Web | No | +| keyframes | A helper method to create keyframes for animations. | function | No | Web | No | ## 遗留问题 diff --git a/zh-cn/styled-system.md b/zh-cn/styled-system.md index 838eb9cc..9c70e925 100644 --- a/zh-cn/styled-system.md +++ b/zh-cn/styled-system.md @@ -15,18 +15,18 @@ 进入到工程目录并输入以下命令： -#### **yarn** +<!-- tabs:start --> + +#### **npm** ```bash -yarn add styled-system@^5.1.5 +npm install styled-system@^5.1.5 ``` -<!-- tabs:start --> - -#### **npm** +#### **yarn** ```bash -npm i styled-system@^5.1.5 +yarn add styled-system@^5.1.5 ``` <!-- tabs:end --> -- Gitee