diff --git a/vmall/react-native-tab-view.md b/vmall/react-native-tab-view.md index 2925b220ec1654062fad0d184bdc87152f03d803..70f6c0e06211378f2c1cdd2947f01fdfaf094705 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,16 +14,14 @@ ## 安装与使用 -正在 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 ``` 下面的代码展示了这个库的基本使用场景: @@ -165,149 +163,10 @@ const styles = StyleSheet.create({ ## Link -tabview是js库,依赖pagerview,原生不需要配置,只需配置好pagerview的link相关配置即可 - -### 引入pagerview代码 - -目前有两种方法: - -1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); -2. 直接链接源码。 - -方法一:通过 har 包引入 -打开 `entry/oh-package.json5`,添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-pager-view": "file:../../node_modules/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-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") +本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-pager-view 的原生端代码,如已在鸿蒙工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。 -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.descriptor.tag, -+ ctx:ctx.rnohContext, -+ buildCustomComponent:CustomComponentBuilder -+ }) -+ } - ... -} -... -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行: - -```bash -cd entry -ohpm install -``` +如未引入请参照[@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)进行引入 -然后编译、运行即可。 ## 兼容性