From 11671d0d52bdbded26975d72b659883ddeb74ef6 Mon Sep 17 00:00:00 2001 From: 18986254310 <1161534872@qq.com> Date: Thu, 7 Dec 2023 20:08:14 +0800 Subject: [PATCH 1/3] =?UTF-8?q?[Issues:=20#I8M5NZ]=20=E4=BF=AE=E6=94=B9tab?= =?UTF-8?q?-view=EF=BC=8C=E5=B9=B6=E6=9B=B4=E6=96=B0readme=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-tab-view.md | 347 +++++++++++++++++++++++++++++++++ 1 file changed, 347 insertions(+) create mode 100644 zh-cn/react-native-tab-view.md diff --git a/zh-cn/react-native-tab-view.md b/zh-cn/react-native-tab-view.md new file mode 100644 index 00000000..66cd0f28 --- /dev/null +++ b/zh-cn/react-native-tab-view.md @@ -0,0 +1,347 @@ +> 模板版本：v0.0.1 + +

+

react-native-tab-view

+

+

+ + Supported platforms + + + License + +

+ +## 安装与使用 + +进入到工程目录并输入以下命令（等待 npm 发布中）： + +```bash +yarn add xxx +``` + +或者 + +```bash +npm install xxx +``` + +下面的代码展示了这个库的基本使用场景： + +```js +import React from "react"; +import { View, Text, Dimensions, StyleSheet } from "react-native"; +import { + TabView, + TabBar, + SceneMap, + NavigationState, + SceneRendererProps, +} from "react-native-tab-view"; + +type State = NavigationState<{ + key: string, + title: string, +}>; + +const FirstRoute = () => ( + + + First tab + + +); + +const SecondRoute = () => ( + + + Second tab + + +); + +const renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, +}); +const TabViewTest = () => { + const initialLayout = { width: Dimensions.get("window").width }; + const [index, setIndex] = React.useState(0); + const renderTabBar = ( + props: SceneRendererProps & { navigationState: State } + ) => ( + + ); + + const [routes] = React.useState([ + { key: "first", title: "First" }, + { key: "second", title: "Second" }, + ]); + + return ( + + ); +}; + +export default TabViewTest; + +const styles = StyleSheet.create({ + tabbar: { + backgroundColor: "#3f51b5", + height: 70, + width: 350, + }, + indicator: { + backgroundColor: "#ffeb3b", + width: 175, + height: 5, + }, + label: { + fontWeight: "400", + fontSize: 20, + width: 100, + height: 50, + color: "black", + }, + tabStyle: { + height: 65, + width: 175, + backgroundColor: "#BAFDAD", + }, +}); +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +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") + +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.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if(ctx.descriptor.type === PAGER_VIEW_TYPE){ ++ RNCViewPager({ ++ tag:ctx.descriptor.tag, ++ ctx:ctx.rnohContext, ++ buildCustomComponent:CustomComponentBuilder ++ }) ++ } + ... +} +... +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-tab-view Releases](https://github.com/react-native-oh-library/react-navigation/releases/) + +## 属性 + +详情请查看[tabview 官方文档](https://github.com/satya164/react-native-tab-view/blob/main/README.md) + +如下是 tabview 已经鸿蒙化的属性： + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| --------------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | ----------- | -------- | +| `onIndexChange` | Callback which is called on tab change, receives the index of the new tab as argument | function | No | iOS,android | yes | +| `renderScene` | Callback which returns a react element to render as the page for the tab. | function | No | iOS,android | yes | +| `renderTabBar` | Callback which returns a custom React Element to use as the tab bar. | function | No | iOS,android | yes | +| `tabBarPosition` | Position of the tab bar in the tab view. | string | No | iOS,android | yes | +| `keyboardDismissMode` | String indicating whether the keyboard gets dismissed in response to a drag gesture. | string | No | iOS,android | yes | +| `swipeEnabled` | Passing false will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | No | iOS,android | yes | +| `animationEnabled` | Enables animation when changing tab. By default it's true. | boolean | No | iOS,android | yes | +| `activeColor` | Custom color for icon and label in the active tab. | string | No | iOS,android | yes | +| `inactiveColor` | Custom color for icon and label in the inactive tab. | string | No | iOS,android | yes | +| `scrollEnabled` | Boolean indicating whether to make the tab bar scrollable. | boolean | No | iOS,android | yes | +| `bounces` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | boolean | No | iOS,android | yes | +| `gap` | Define a spacing between tabs. | number | No | iOS,android | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md) ，请自由地享受和参与开源。 -- Gitee From b03f96d18f6e2f0a3e176aa42012439bbeb496a2 Mon Sep 17 00:00:00 2001 From: 18986254310 <1161534872@qq.com> Date: Wed, 13 Dec 2023 11:49:33 +0800 Subject: [PATCH 2/3] =?UTF-8?q?[Issues:=20#I8M5NZ]=20=E4=BF=AE=E6=94=B9tab?= =?UTF-8?q?-view=EF=BC=8C=E5=B9=B6=E6=9B=B4=E6=96=B0readme=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-tab-view.md | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/zh-cn/react-native-tab-view.md b/zh-cn/react-native-tab-view.md index 66cd0f28..123d5513 100644 --- a/zh-cn/react-native-tab-view.md +++ b/zh-cn/react-native-tab-view.md @@ -4,17 +4,17 @@

react-native-tab-view

- - Supported platforms + + Supported platforms - + License

## 安装与使用 -进入到工程目录并输入以下命令（等待 npm 发布中）： +正在 npm 发布中，当前请先从仓库Release中获取库 tgz，通过使用本地依赖来安装本库。 ```bash yarn add xxx @@ -165,11 +165,9 @@ const styles = StyleSheet.create({ ## Link -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +tabview是js库，依赖pagerview，原生不需要配置，只需配置好pagerview的link相关配置即可 -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 +### 引入pagerview代码 目前有两种方法： @@ -275,7 +273,7 @@ import { } 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' ++ import { RNCViewPager, PAGER_VIEW_TYPE } from 'rnoh-pager-view' @Builder function CustomComponentBuilder(ctx: ComponentBuilderContext) { @@ -319,7 +317,7 @@ ohpm install ## 属性 -详情请查看[tabview 官方文档](https://github.com/satya164/react-native-tab-view/blob/main/README.md) +详情请查看[tabview 官方文档](https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/README.md) 如下是 tabview 已经鸿蒙化的属性： @@ -331,7 +329,11 @@ ohpm install | `tabBarPosition` | Position of the tab bar in the tab view. | string | No | iOS,android | yes | | `keyboardDismissMode` | String indicating whether the keyboard gets dismissed in response to a drag gesture. | string | No | iOS,android | yes | | `swipeEnabled` | Passing false will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | No | iOS,android | yes | -| `animationEnabled` | Enables animation when changing tab. By default it's true. | boolean | No | iOS,android | yes | +| `style` | Style to apply to the pager view wrapping all the scenes. | boolean | No | iOS,android | yes | +| `tabStyle` | Style to apply to the individual tab items in the tab bar. | boolean | No | iOS,android | yes | +| `indicatorStyle` | Style to apply to the active indicator. | boolean | No | iOS,android | yes | +| `labelStyle` | Style to apply to the tab item label. | boolean | No | iOS,android | yes | +| `style` | Style to apply to the tab bar container. | boolean | No | iOS,android | yes | | `activeColor` | Custom color for icon and label in the active tab. | string | No | iOS,android | yes | | `inactiveColor` | Custom color for icon and label in the inactive tab. | string | No | iOS,android | yes | | `scrollEnabled` | Boolean indicating whether to make the tab bar scrollable. | boolean | No | iOS,android | yes | -- Gitee From 591dfd76e2428c31551c280d38ee5e1d32345504 Mon Sep 17 00:00:00 2001 From: 18986254310 <1161534872@qq.com> Date: Wed, 13 Dec 2023 14:58:27 +0800 Subject: [PATCH 3/3] =?UTF-8?q?[Issues:=20#I8M5NZ]=20=E4=BF=AE=E6=94=B9tab?= =?UTF-8?q?-view=EF=BC=8C=E5=B9=B6=E6=9B=B4=E6=96=B0readme=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-tab-view.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/zh-cn/react-native-tab-view.md b/zh-cn/react-native-tab-view.md index 123d5513..533cf3ea 100644 --- a/zh-cn/react-native-tab-view.md +++ b/zh-cn/react-native-tab-view.md @@ -323,22 +323,22 @@ ohpm install | 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | | --------------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | ----------- | -------- | -| `onIndexChange` | Callback which is called on tab change, receives the index of the new tab as argument | function | No | iOS,android | yes | -| `renderScene` | Callback which returns a react element to render as the page for the tab. | function | No | iOS,android | yes | -| `renderTabBar` | Callback which returns a custom React Element to use as the tab bar. | function | No | iOS,android | yes | -| `tabBarPosition` | Position of the tab bar in the tab view. | string | No | iOS,android | yes | -| `keyboardDismissMode` | String indicating whether the keyboard gets dismissed in response to a drag gesture. | string | No | iOS,android | yes | -| `swipeEnabled` | Passing false will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | No | iOS,android | yes | -| `style` | Style to apply to the pager view wrapping all the scenes. | boolean | No | iOS,android | yes | -| `tabStyle` | Style to apply to the individual tab items in the tab bar. | boolean | No | iOS,android | yes | -| `indicatorStyle` | Style to apply to the active indicator. | boolean | No | iOS,android | yes | -| `labelStyle` | Style to apply to the tab item label. | boolean | No | iOS,android | yes | -| `style` | Style to apply to the tab bar container. | boolean | No | iOS,android | yes | -| `activeColor` | Custom color for icon and label in the active tab. | string | No | iOS,android | yes | -| `inactiveColor` | Custom color for icon and label in the inactive tab. | string | No | iOS,android | yes | -| `scrollEnabled` | Boolean indicating whether to make the tab bar scrollable. | boolean | No | iOS,android | yes | -| `bounces` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | boolean | No | iOS,android | yes | -| `gap` | Define a spacing between tabs. | number | No | iOS,android | yes | +| `onIndexChange` | Callback which is called on tab change, receives the index of the new tab as argument | function | No | All | yes | +| `renderScene` | Callback which returns a react element to render as the page for the tab. | function | No | All | yes | +| `renderTabBar` | Callback which returns a custom React Element to use as the tab bar. | function | No | All | yes | +| `tabBarPosition` | Position of the tab bar in the tab view. | string | No | All | yes | +| `keyboardDismissMode` | String indicating whether the keyboard gets dismissed in response to a drag gesture. | string | No | All | yes | +| `swipeEnabled` | Passing false will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | No | All | yes | +| `style` | Style to apply to the pager view wrapping all the scenes. | boolean | No | All | yes | +| `tabStyle` | Style to apply to the individual tab items in the tab bar. | boolean | No | All | yes | +| `indicatorStyle` | Style to apply to the active indicator. | boolean | No | All | yes | +| `labelStyle` | Style to apply to the tab item label. | boolean | No | All | yes | +| `style` | Style to apply to the tab bar container. | boolean | No | All | yes | +| `activeColor` | Custom color for icon and label in the active tab. | string | No | All | yes | +| `inactiveColor` | Custom color for icon and label in the inactive tab. | string | No | All | yes | +| `scrollEnabled` | Boolean indicating whether to make the tab bar scrollable. | boolean | No | All | yes | +| `bounces` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | boolean | No | All | yes | +| `gap` | Define a spacing between tabs. | number | No | All | yes | ## 遗留问题 -- Gitee