From 99fe5a600d30f1d7df73d06e6b66e8f96079bb09 Mon Sep 17 00:00:00 2001 From: tiantian Date: Sun, 24 Dec 2023 13:05:23 +0800 Subject: [PATCH 1/4] =?UTF-8?q?[Issues:=20#I8QUP3]=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=AE=89=E8=A3=85=E5=BC=95=E5=85=A5=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vmall/react-native-tab-view.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/vmall/react-native-tab-view.md b/vmall/react-native-tab-view.md index 533cf3ea..46672441 100644 --- a/vmall/react-native-tab-view.md +++ b/vmall/react-native-tab-view.md @@ -17,13 +17,13 @@ 正在 npm 发布中，当前请先从仓库Release中获取库 tgz，通过使用本地依赖来安装本库。 ```bash -yarn add xxx +yarn add @react-native-oh-tpl/react-native-tab-view ``` 或者 ```bash -npm install xxx +npm install @react-native-oh-tpl/react-native-tab-view ``` 下面的代码展示了这个库的基本使用场景： @@ -180,7 +180,7 @@ tabview是js库，依赖pagerview，原生不需要配置，只需配置好pager ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-pager-view": "file:../../node_modules/react-native-pager-view/harmony/pager_view.har" + "rnoh-pager-view": "file:../../node_modules/@react-native-oh-tpl/react-native-pager-view/harmony/pager_view.har" } ``` @@ -199,7 +199,7 @@ ohpm install ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-pager-view": "file:../../node_modules/react-native-pager-view/harmony/pager_view" + "rnoh-pager-view": "file:../../node_modules/@react-native-oh-tpl/react-native-pager-view/harmony/pager_view" } ``` -- Gitee From 1b3bfa1bc41ab3ea0bfb5875d057fe3e59220f9a Mon Sep 17 00:00:00 2001 From: tiantian Date: Sun, 24 Dec 2023 15:03:00 +0800 Subject: [PATCH 2/4] [Issues: #I8QUP3] update react-native-tab-view --- vmall/react-native-tab-view.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/vmall/react-native-tab-view.md b/vmall/react-native-tab-view.md index 46672441..a5eabe1b 100644 --- a/vmall/react-native-tab-view.md +++ b/vmall/react-native-tab-view.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.1

react-native-tab-view

@@ -14,8 +14,6 @@ ## 安装与使用 -正在 npm 发布中，当前请先从仓库Release中获取库 tgz，通过使用本地依赖来安装本库。 - ```bash yarn add @react-native-oh-tpl/react-native-tab-view ``` @@ -284,9 +282,9 @@ function CustomComponentBuilder(ctx: ComponentBuilderContext) { buildCustomComponent: CustomComponentBuilder }) } -+ else if(ctx.descriptor.type === PAGER_VIEW_TYPE){ ++ else if(ctx.componentName === PAGER_VIEW_TYPE){ + RNCViewPager({ -+ tag:ctx.descriptor.tag, ++ tag:ctx.tag, + ctx:ctx.rnohContext, + buildCustomComponent:CustomComponentBuilder + }) -- Gitee From 527b1e55272519d282db12d450634cd3b5872f61 Mon Sep 17 00:00:00 2001 From: tiantian Date: Sun, 24 Dec 2023 15:05:08 +0800 Subject: [PATCH 3/4] [Issues: #I8QUP3] update react-native-tab-view --- vmall/react-native-tab-view.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vmall/react-native-tab-view.md b/vmall/react-native-tab-view.md index a5eabe1b..3f1c5aa0 100644 --- a/vmall/react-native-tab-view.md +++ b/vmall/react-native-tab-view.md @@ -278,7 +278,7 @@ function CustomComponentBuilder(ctx: ComponentBuilderContext) { if (ctx.componentName === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, + tag: ctx.tag, buildCustomComponent: CustomComponentBuilder }) } -- Gitee From 27318edea8ecae57a32669495d6af9ef8625a0ec Mon Sep 17 00:00:00 2001 From: tiantian Date: Sun, 24 Dec 2023 15:38:51 +0800 Subject: [PATCH 4/4] [Issues: #I8QUP3] update tab-view --- vmall/react-native-tab-view.md | 143 +-------------------------------- 1 file changed, 2 insertions(+), 141 deletions(-) diff --git a/vmall/react-native-tab-view.md b/vmall/react-native-tab-view.md index 3f1c5aa0..70f6c0e0 100644 --- a/vmall/react-native-tab-view.md +++ b/vmall/react-native-tab-view.md @@ -163,149 +163,10 @@ const styles = StyleSheet.create({ ## Link -tabview是js库，依赖pagerview，原生不需要配置，只需配置好pagerview的link相关配置即可 +本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-pager-view 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -### 引入pagerview代码 +如未引入请参照[@react-native-oh-tpl/react-native-pager-view 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/vmall/react-native-pager-view.md#link)进行引入 -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-pager-view": "file:../../node_modules/@react-native-oh-tpl/react-native-pager-view/harmony/pager_view.har" - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-pager-view": "file:../../node_modules/@react-native-oh-tpl/react-native-pager-view/harmony/pager_view" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - -### 配置 CMakeLists 和引入 ViewPagerPackage - -打开 `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-pager-view/src/main/cpp" ./pager_view) -# 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_pager_view) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "ViewPagerPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 RNCViewPager 组件 - -打开 `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 { RNCViewPager, PAGER_VIEW_TYPE } from 'rnoh-pager-view' - -@Builder -function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnohContext, - tag: ctx.tag, - buildCustomComponent: CustomComponentBuilder - }) - } -+ else if(ctx.componentName === PAGER_VIEW_TYPE){ -+ RNCViewPager({ -+ tag:ctx.tag, -+ ctx:ctx.rnohContext, -+ buildCustomComponent:CustomComponentBuilder -+ }) -+ } - ... -} -... -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 ## 兼容性 -- Gitee