From 00ddb1b627e56c3b9e50ea7bdf1db2b974ee6754 Mon Sep 17 00:00:00 2001 From: opines Date: Sat, 23 Dec 2023 18:51:22 +0800 Subject: [PATCH 1/4] =?UTF-8?q?[Issues:=20#I8QSXQ]=20=E6=96=B0=E5=A2=9Erea?= =?UTF-8?q?ct-native-qrcode-svg=E6=96=87=E6=A1=A3vmall=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vmall/react-native-qrcode-svg.md | 91 ++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 vmall/react-native-qrcode-svg.md diff --git a/vmall/react-native-qrcode-svg.md b/vmall/react-native-qrcode-svg.md new file mode 100644 index 00000000..8159b432 --- /dev/null +++ b/vmall/react-native-qrcode-svg.md @@ -0,0 +1,91 @@ +> 模板版本：v0.1.1 + +

+

react-native-qrcode-svg

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-qrcode-svg) + +## 安装与使用 + +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-qrcode-svg/releases)中获取库 tgz，通过使用本地依赖来安装本库。** + +进入到工程目录并输入以下命令： + +```bash +yarn add @react-native-oh-tpl/react-native-qrcode-svg +``` + +或者 + +```bash +npm install @react-native-oh-tpl/react-native-qrcode-svg +``` + +下面的代码展示了这个库的基本使用场景： + +```js +import QRCode from 'react-native-qrcode-svg'; + +// Simple usage, defaults for all but the value +render() { + return ( + + ); +}; +``` + +## Link + +本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg.md#link)进行引入 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-qrcode-svg Releases](https://github.com/react-native-oh-library/react-native-qrcode-svg/releases) + +## 属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | -------- | +| `size` | Size of rendered image in pixels | number | No | All | yes | +| `value` | String Value of the QR code | string | yes | All | yes | +| `color` | Color of the QR code | string | No | All | yes | +| `backgroundColor` | Color of the background | string | No | All | yes | +| `enableLinearGradient` | enables or disables linear gradient | boolean | No | All | no | +| `linearGradient` | array of 2 rgb colors used to create the linear gradient | string[] | No | All | no | +| `gradientDirection` | the direction of the linear gradient | string | No | All | no | +| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | | No | All | yes | +| `logoSize` | Size of the imprinted logo. Bigger logo = less error correction in QR code | number | No | All | yes | +| `logoBackgroundColor` | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop. | string | No | All | yes | +| `logoMargin` | logo's distance to its wrapper | number | No | All | yes | +| `logoBorderRadius` | the border-radius of logo image (Android is not supported) | number | No | ios | no | +| `quietZone` | quiet zone around the qr in pixels (useful when saving image to gallery) | number | No | All | yes | +| `getRef` | Get SVG ref for further usage | callback | No | All | 不涉及 | +| `ecl` | Error correction level | string | No | All | yes | +| `onError(error)` | Callback fired when exception happened during the code generating process | callback | No | All | 不涉及 | + +## 遗留问题 + +- [ ] 部分属性未实现鸿蒙化 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/awesomejerry/react-native-qrcode-svg/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee From f68079a093a005ceea5917485c7bd9463babc0fa Mon Sep 17 00:00:00 2001 From: opines Date: Sun, 24 Dec 2023 17:03:49 +0800 Subject: [PATCH 2/4] =?UTF-8?q?[Issues:=20#I8QSXQ]=20=E4=BF=AE=E6=94=B9rea?= =?UTF-8?q?ct-native-qrcode-svg=E6=96=87=E6=A1=A3vmall=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vmall/react-native-qrcode-svg.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/vmall/react-native-qrcode-svg.md b/vmall/react-native-qrcode-svg.md index 8159b432..92d435a5 100644 --- a/vmall/react-native-qrcode-svg.md +++ b/vmall/react-native-qrcode-svg.md @@ -16,8 +16,6 @@ ## 安装与使用 -**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-qrcode-svg/releases)中获取库 tgz，通过使用本地依赖来安装本库。** - 进入到工程目录并输入以下命令： ```bash @@ -70,7 +68,7 @@ render() { | `enableLinearGradient` | enables or disables linear gradient | boolean | No | All | no | | `linearGradient` | array of 2 rgb colors used to create the linear gradient | string[] | No | All | no | | `gradientDirection` | the direction of the linear gradient | string | No | All | no | -| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | | No | All | yes | +| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | object | No | All | yes | | `logoSize` | Size of the imprinted logo. Bigger logo = less error correction in QR code | number | No | All | yes | | `logoBackgroundColor` | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop. | string | No | All | yes | | `logoMargin` | logo's distance to its wrapper | number | No | All | yes | -- Gitee From 2b54fd9bc26144dc2598f64f84c6eb6771d04eb1 Mon Sep 17 00:00:00 2001 From: opines Date: Mon, 25 Dec 2023 14:38:53 +0800 Subject: [PATCH 3/4] =?UTF-8?q?[Issues:=20#I8QSXQ]=20=E4=BF=AE=E6=94=B9rea?= =?UTF-8?q?ct-native-qrcode-svg=E6=96=87=E6=A1=A3vmall=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vmall/react-native-qrcode-svg.md | 37 ++++++++++++++++---------------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/vmall/react-native-qrcode-svg.md b/vmall/react-native-qrcode-svg.md index 92d435a5..cc1aa63a 100644 --- a/vmall/react-native-qrcode-svg.md +++ b/vmall/react-native-qrcode-svg.md @@ -59,27 +59,28 @@ render() { ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | -------- | -| `size` | Size of rendered image in pixels | number | No | All | yes | -| `value` | String Value of the QR code | string | yes | All | yes | -| `color` | Color of the QR code | string | No | All | yes | -| `backgroundColor` | Color of the background | string | No | All | yes | -| `enableLinearGradient` | enables or disables linear gradient | boolean | No | All | no | -| `linearGradient` | array of 2 rgb colors used to create the linear gradient | string[] | No | All | no | -| `gradientDirection` | the direction of the linear gradient | string | No | All | no | -| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | object | No | All | yes | -| `logoSize` | Size of the imprinted logo. Bigger logo = less error correction in QR code | number | No | All | yes | -| `logoBackgroundColor` | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop. | string | No | All | yes | -| `logoMargin` | logo's distance to its wrapper | number | No | All | yes | -| `logoBorderRadius` | the border-radius of logo image (Android is not supported) | number | No | ios | no | -| `quietZone` | quiet zone around the qr in pixels (useful when saving image to gallery) | number | No | All | yes | -| `getRef` | Get SVG ref for further usage | callback | No | All | 不涉及 | -| `ecl` | Error correction level | string | No | All | yes | -| `onError(error)` | Callback fired when exception happened during the code generating process | callback | No | All | 不涉及 | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ------------------ | +| `size` | Size of rendered image in pixels | number | No | All | yes 不支持动态更新 | +| `value` | String Value of the QR code | string | yes | All | yes | +| `color` | Color of the QR code | string | No | All | yes | +| `backgroundColor` | Color of the background | string | No | All | yes | +| `enableLinearGradient` | enables or disables linear gradient | boolean | No | All | no | +| `linearGradient` | array of 2 rgb colors used to create the linear gradient | string[] | No | All | no | +| `gradientDirection` | the direction of the linear gradient | string | No | All | no | +| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | object | No | All | yes | +| `logoSize` | Size of the imprinted logo. Bigger logo = less error correction in QR code | number | No | All | yes | +| `logoBackgroundColor` | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop. | string | No | All | yes | +| `logoMargin` | logo's distance to its wrapper | number | No | All | yes | +| `logoBorderRadius` | the border-radius of logo image (Android is not supported) | number | No | ios | no | +| `quietZone` | quiet zone around the qr in pixels (useful when saving image to gallery) | number | No | All | yes 不支持动态更新 | +| `getRef` | Get SVG ref for further usage | callback | No | All | 不涉及 | +| `ecl` | Error correction level | string | No | All | yes | +| `onError(error)` | Callback fired when exception happened during the code generating process | callback | No | All | 不涉及 | ## 遗留问题 +- [ ] size、quietZone 属性暂不支持动态更新 - [ ] 部分属性未实现鸿蒙化 ## 其他 -- Gitee From 33ba62ede6a8844c00f970c3ace1cf7142c1bc69 Mon Sep 17 00:00:00 2001 From: opines Date: Mon, 25 Dec 2023 15:01:15 +0800 Subject: [PATCH 4/4] =?UTF-8?q?[Issues:=20#I8QSXQ]=20=E4=BF=AE=E6=94=B9rea?= =?UTF-8?q?ct-native-qrcode-svg=E6=96=87=E6=A1=A3vmall=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vmall/react-native-qrcode-svg.md | 1 - 1 file changed, 1 deletion(-) diff --git a/vmall/react-native-qrcode-svg.md b/vmall/react-native-qrcode-svg.md index cc1aa63a..f0e07cf1 100644 --- a/vmall/react-native-qrcode-svg.md +++ b/vmall/react-native-qrcode-svg.md @@ -81,7 +81,6 @@ render() { ## 遗留问题 - [ ] size、quietZone 属性暂不支持动态更新 -- [ ] 部分属性未实现鸿蒙化 ## 其他 -- Gitee