From 43add8022c7d1dac9d7de4ab6e43766ab47a0e6b Mon Sep 17 00:00:00 2001 From: opines Date: Tue, 5 Dec 2023 17:00:15 +0800 Subject: [PATCH 1/3] =?UTF-8?q?[Issues:=20#I8K7DK]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-svg=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 + zh-cn/README.md | 1 + zh-cn/react-native-svg.md | 294 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 297 insertions(+) create mode 100644 zh-cn/react-native-svg.md diff --git a/README.md b/README.md index bf97dede9..e4d4a5dce 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,8 @@ | 9 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](zh-cn/react-native-slider.md) | | 10 | react-native-SmartRefreshLayout | 0.6.7 | 否 | 70% | [@react-native-oh-library/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | | 11 | lottie-react-native | 6.4.1 | 是 | 50% | [@react-native-oh-library/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](zh-cn/lottie-react-native.md) | +| 12 | react-native-webview | 13.6.2 | 是 | 15% | [@react-native-oh-library/react-native-webview](https://github.com/react-native-oh-library/react-native-webview) | [链接](zh-cn/react-native-webview.md) | +| 13 | react-native-svg | 13.14.0 | 是 | 10% | [@react-native-oh-library/react-native-svg](https://github.com/react-native-oh-library/react-native-svg) | [链接](zh-cn/react-native-svg.md) | ## 社区 diff --git a/zh-cn/README.md b/zh-cn/README.md index 77d495a92..e4d4a5dce 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -26,6 +26,7 @@ | 10 | react-native-SmartRefreshLayout | 0.6.7 | 否 | 70% | [@react-native-oh-library/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | | 11 | lottie-react-native | 6.4.1 | 是 | 50% | [@react-native-oh-library/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](zh-cn/lottie-react-native.md) | | 12 | react-native-webview | 13.6.2 | 是 | 15% | [@react-native-oh-library/react-native-webview](https://github.com/react-native-oh-library/react-native-webview) | [链接](zh-cn/react-native-webview.md) | +| 13 | react-native-svg | 13.14.0 | 是 | 10% | [@react-native-oh-library/react-native-svg](https://github.com/react-native-oh-library/react-native-svg) | [链接](zh-cn/react-native-svg.md) | ## 社区 diff --git a/zh-cn/react-native-svg.md b/zh-cn/react-native-svg.md new file mode 100644 index 000000000..ee26dfb10 --- /dev/null +++ b/zh-cn/react-native-svg.md @@ -0,0 +1,294 @@ +> 模板版本：v0.0.1 + +

+

react-native-svg

+

+

+ + Supported platforms + + + License + +

+ +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **yarn** + +```bash +yarn add react-native-svg@npm:@react-native-oh-tpl/react-native-svg +``` + +#### **npm** + +```bash +npm install react-native-svg@npm:@react-native-oh-tpl/react-native-svg +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import Svg, { Path, G } from "react-native-svg"; + +const TRIANGLE_PATH_DATA = "M90 0 L0 180 L180 180 Z"; + + + +; +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-svg": "file:../../node_modules/react-native-svg/harmony/svg.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-svg": "file:../../node_modules/react-native-svg/harmony/svg" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 LottieAnimationViewPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/rnoh-svg/src/main/cpp" ./svg) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_svg) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "SVGPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 SVG 组件 + +打开 `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 { ++ SVG_VIEW_TYPE_NAME, ++ SVGView, ++ SVG_GROUP_TYPE_NAME, ++ SVGGroup, ++ SVG_PATH_TYPE_NAME, ++ SVGPath, ++ SVG_RECT_TYPE_NAME, ++ SVGRect, ++ SVG_IMAGE_TYPE_NAME, ++ SVGImage ++ } from "rnoh-svg" + +@Builder +function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if (ctx.componentName === SVG_VIEW_TYPE_NAME) { ++ SVGView({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } else if (ctx.componentName === SVG_GROUP_TYPE_NAME) { ++ SVGGroup({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } else if (ctx.componentName === SVG_PATH_TYPE_NAME) { ++ SVGPath({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag ++ }) ++ } else if (ctx.componentName === SVG_RECT_TYPE_NAME) { ++ SVGRect({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag ++ }) ++ } else if (ctx.componentName === SVG_IMAGE_TYPE_NAME) { ++ SVGImage({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag ++ }) ++ } + ... +} +... +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-svg Releases](https://github.com/react-native-oh-library/react-native-svg/releases) + +## 属性 + +详细请查看 [react-native-svg 的文档介绍](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md) + +以下为目前已支持的组件属性： + +**Svg**：绘制组件的父组件 + +| 属性 | 类型 | 释义 | +| :-----: | :-------------: | :------: | +| width | number\| string | 组件宽度 | +| height | number\| string | 组件高度 | +| viewBox | string | 组件视区 | +| color | string | 颜色 | + +**G**：该元素是用于对其他 SVG 元素进行分组的容器 + +| 属性 | 类型 | 释义 | 默认值 | +| :-----: | :-------------: | :------: | :----: | + +**Path**： 路径绘制组件，根据绘制路径生成封闭的自定义形状 + +| 属性 | 类型 | 释义 | 默认值 | +| :---------: | :-----: | :------------------------------------: | :----: | +| d | string | 路径绘制的命令字符串 | '' | + +**Rect**： 矩形绘制组件，根据角位置和宽高生成矩形形状 + +| 属性 | 类型 | 释义 | 默认值 | +| :-----: | :-------------: | :---------------: | :----: | +| x | number\| string | 在 x 轴上平移距离 | 0 | +| y | number\| string | 在 y 轴上平移距离 | 0 | +| width | number\| string | 元素宽度 | 0 | +| height | number\| string | 元素高度 | 0 | +| rx | number\| string | 定义 x 轴上的半径 | 'none' | +| rx | number\| string | 定义 y 轴上的半径 | 'none' | + +**Image**： 图像元素，支持 JPEG、PNG 格式 + +| 属性 | 类型 | 释义 | 默认值 | +| :-----: | :-------------: | :---------------: | :----: | +| x | number\| string | 在 x 轴上平移距离 | 0 | +| y | number\| string | 在 y 轴上平移距离 | 0 | +| width | number\| string | 元素宽度 | 0 | +| height | number\| string | 元素高度 | 0 | +| href | source\| string | 图像资源引用 | 'none' | + +**公共属性**：Common props 组件属性支持情况 + +| 属性 | 类型 | 释义 | 默认值 | G | Path | Rect | +| :---------: | :-----: | :----------------------------------: | :----: | :-: | ---- | ---- | +| fill | boolean | 设置填充区域颜色 | '#000' | √ | √ | √ | +| stroke | string | 设置边框颜色，不设置时，默认没有边框 | 'none' | √ | √ | √ | +| strokeWidth | number | 设置线条宽度 | 1 | | √ | √ | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-svg/blob/harmony/LICENSE) ，请自由地享受和参与开源。 -- Gitee From 61b80c572b20fe278264ddde53077c2db63b22ad Mon Sep 17 00:00:00 2001 From: opines Date: Tue, 5 Dec 2023 17:04:46 +0800 Subject: [PATCH 2/3] =?UTF-8?q?[Issues:=20#I8K7DK]=20=E4=BF=AE=E6=AD=A3rea?= =?UTF-8?q?ct-native-svg=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-svg.md | 40 +++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/zh-cn/react-native-svg.md b/zh-cn/react-native-svg.md index ee26dfb10..7c0c82153 100644 --- a/zh-cn/react-native-svg.md +++ b/zh-cn/react-native-svg.md @@ -247,35 +247,35 @@ ohpm install **G**：该元素是用于对其他 SVG 元素进行分组的容器 -| 属性 | 类型 | 释义 | 默认值 | -| :-----: | :-------------: | :------: | :----: | +| 属性 | 类型 | 释义 | 默认值 | +| :--: | :--: | :--: | :----: | **Path**： 路径绘制组件，根据绘制路径生成封闭的自定义形状 -| 属性 | 类型 | 释义 | 默认值 | -| :---------: | :-----: | :------------------------------------: | :----: | -| d | string | 路径绘制的命令字符串 | '' | +| 属性 | 类型 | 释义 | 默认值 | +| :--: | :----: | :------------------: | :----: | +| d | string | 路径绘制的命令字符串 | '' | **Rect**： 矩形绘制组件，根据角位置和宽高生成矩形形状 -| 属性 | 类型 | 释义 | 默认值 | -| :-----: | :-------------: | :---------------: | :----: | -| x | number\| string | 在 x 轴上平移距离 | 0 | -| y | number\| string | 在 y 轴上平移距离 | 0 | -| width | number\| string | 元素宽度 | 0 | -| height | number\| string | 元素高度 | 0 | -| rx | number\| string | 定义 x 轴上的半径 | 'none' | -| rx | number\| string | 定义 y 轴上的半径 | 'none' | +| 属性 | 类型 | 释义 | 默认值 | +| :----: | :-------------: | :---------------: | :----: | +| x | number\| string | 在 x 轴上平移距离 | 0 | +| y | number\| string | 在 y 轴上平移距离 | 0 | +| width | number\| string | 元素宽度 | 0 | +| height | number\| string | 元素高度 | 0 | +| rx | number\| string | 定义 x 轴上的半径 | 'none' | +| rx | number\| string | 定义 y 轴上的半径 | 'none' | **Image**： 图像元素，支持 JPEG、PNG 格式 -| 属性 | 类型 | 释义 | 默认值 | -| :-----: | :-------------: | :---------------: | :----: | -| x | number\| string | 在 x 轴上平移距离 | 0 | -| y | number\| string | 在 y 轴上平移距离 | 0 | -| width | number\| string | 元素宽度 | 0 | -| height | number\| string | 元素高度 | 0 | -| href | source\| string | 图像资源引用 | 'none' | +| 属性 | 类型 | 释义 | 默认值 | +| :----: | :-------------: | :---------------: | :----: | +| x | number\| string | 在 x 轴上平移距离 | 0 | +| y | number\| string | 在 y 轴上平移距离 | 0 | +| width | number\| string | 元素宽度 | 0 | +| height | number\| string | 元素高度 | 0 | +| href | source\| string | 图像资源引用 | 'none' | **公共属性**：Common props 组件属性支持情况 -- Gitee From 131cba2a69c4e0ea475d5e9bb0e6d84f8dd48125 Mon Sep 17 00:00:00 2001 From: opines Date: Wed, 6 Dec 2023 09:47:30 +0800 Subject: [PATCH 3/3] =?UTF-8?q?[Issues:=20#I8K7DK]=20=E4=BF=AE=E6=AD=A3rea?= =?UTF-8?q?ct-native-svg=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-svg.md | 64 +++++++++++++++++++-------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/zh-cn/react-native-svg.md b/zh-cn/react-native-svg.md index 7c0c82153..f7aa4a64b 100644 --- a/zh-cn/react-native-svg.md +++ b/zh-cn/react-native-svg.md @@ -93,7 +93,7 @@ cd entry ohpm install --no-link ``` -### 配置 CMakeLists 和引入 LottieAnimationViewPackage +### 配置 CMakeLists 和引入 SVGPackage 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -238,52 +238,52 @@ ohpm install **Svg**：绘制组件的父组件 -| 属性 | 类型 | 释义 | -| :-----: | :-------------: | :------: | -| width | number\| string | 组件宽度 | -| height | number\| string | 组件高度 | -| viewBox | string | 组件视区 | -| color | string | 颜色 | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :-----: | :------: | :-------------: | -------- | -------- | -------- | +| width | 组件宽度 | number\| string | Yes | All | Yes | +| height | 组件高度 | number\| string | Yes | All | Yes | +| viewBox | 组件视区 | string | No | All | Yes | +| color | 颜色 | string | No | All | Yes | **G**：该元素是用于对其他 SVG 元素进行分组的容器 -| 属性 | 类型 | 释义 | 默认值 | -| :--: | :--: | :--: | :----: | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :--: | :--: | :--: | -------- | -------- | -------- | **Path**： 路径绘制组件，根据绘制路径生成封闭的自定义形状 -| 属性 | 类型 | 释义 | 默认值 | -| :--: | :----: | :------------------: | :----: | -| d | string | 路径绘制的命令字符串 | '' | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :--: | :------------------: | :----: | -------- | -------- | -------- | +| d | 路径绘制的命令字符串 | string | Yes | All | Yes | **Rect**： 矩形绘制组件，根据角位置和宽高生成矩形形状 -| 属性 | 类型 | 释义 | 默认值 | -| :----: | :-------------: | :---------------: | :----: | -| x | number\| string | 在 x 轴上平移距离 | 0 | -| y | number\| string | 在 y 轴上平移距离 | 0 | -| width | number\| string | 元素宽度 | 0 | -| height | number\| string | 元素高度 | 0 | -| rx | number\| string | 定义 x 轴上的半径 | 'none' | -| rx | number\| string | 定义 y 轴上的半径 | 'none' | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :----: | :---------------: | :-------------: | -------- | -------- | -------- | +| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | +| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | +| width | 元素宽度 | number\| string | Yes | All | Yes | +| height | 元素高度 | number\| string | Yes | All | Yes | +| rx | 定义 x 轴上的半径 | number\| string | No | All | Yes | +| rx | 定义 y 轴上的半径 | number\| string | No | All | Yes | **Image**： 图像元素，支持 JPEG、PNG 格式 -| 属性 | 类型 | 释义 | 默认值 | -| :----: | :-------------: | :---------------: | :----: | -| x | number\| string | 在 x 轴上平移距离 | 0 | -| y | number\| string | 在 y 轴上平移距离 | 0 | -| width | number\| string | 元素宽度 | 0 | -| height | number\| string | 元素高度 | 0 | -| href | source\| string | 图像资源引用 | 'none' | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :----: | :---------------: | :-------------: | -------- | -------- | -------- | +| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | +| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | +| width | 元素宽度 | number\| string | Yes | All | Yes | +| height | 元素高度 | number\| string | Yes | All | Yes | +| href | 图像资源引用 | source\| string | Yes | All | Yes | **公共属性**：Common props 组件属性支持情况 -| 属性 | 类型 | 释义 | 默认值 | G | Path | Rect | -| :---------: | :-----: | :----------------------------------: | :----: | :-: | ---- | ---- | -| fill | boolean | 设置填充区域颜色 | '#000' | √ | √ | √ | -| stroke | string | 设置边框颜色，不设置时，默认没有边框 | 'none' | √ | √ | √ | -| strokeWidth | number | 设置线条宽度 | 1 | | √ | √ | +| 属性 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | G | Path | Rect | +| :---------: | :----------------------------------: | :----: | :----: | :------: | -------- | --- | ---- | ---- | +| fill | 设置填充区域颜色 | string | '#000' | No | All | | √ | √ | +| stroke | 设置边框颜色，不设置时，默认没有边框 | string | 'none' | No | All | | √ | √ | +| strokeWidth | 设置边框宽度 | number | 1 | No | All | | √ | √ | ## 遗留问题 -- Gitee