From 50b9d429f1bd36a7715580de44faf1f746aa5f13 Mon Sep 17 00:00:00 2001 From: 2361391426 <2361391426@qq.com> Date: Mon, 24 Jun 2024 17:03:55 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#IA7U6S]=20=E5=8D=87?= =?UTF-8?q?=E7=BA=A7react-native-tab-view=E6=8C=87=E5=AF=BC=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E8=87=B3V0.2.2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-tab-view.md | 122 +++++++++++++++++++++++++-------- 1 file changed, 95 insertions(+), 27 deletions(-) diff --git a/zh-cn/react-native-tab-view.md b/zh-cn/react-native-tab-view.md index 68701f55..5ead6729 100644 --- a/zh-cn/react-native-tab-view.md +++ b/zh-cn/react-native-tab-view.md @@ -1,4 +1,5 @@ -> 模板版本：v0.1.3 + +> 模板版本：v0.2.2

react-native-tab-view

@@ -21,7 +22,7 @@ 进入到工程目录并输入以下命令： > [!TIP] # 处替换为 tgz 包的路径 - + #### **npm** @@ -41,7 +42,7 @@ yarn add @react-native-oh-tpl/react-native-tab-view@file:# 下面的代码展示了这个库的基本使用场景： > [!WARNING] 使用时 import 的库名不变。 - + ```js import React from "react"; import { View, Text, Dimensions, StyleSheet } from "react-native"; @@ -176,10 +177,13 @@ const styles = StyleSheet.create({ }, }); ``` +## 使用 Codegen（如本库已适配了 Codegen ） + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md)。 ## Link -本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-pager-view 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库HarmonyOS侧实现依赖@react-native-oh-tpl/react-native-pager-view 的原生端代码，如已在HarmonyOS工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 如未引入请参照[@react-native-oh-tpl/react-native-pager-view 文档的 Link 章节](/zh-cn/react-native-pager-view.md#link)进行引入 @@ -214,35 +218,99 @@ const styles = StyleSheet.create({ 详情请查看[tabview 官方文档](https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/README.md) -如下是 tabview 已经鸿蒙化的属性： - -> [!tip] "鸿蒙支持"列为 yes 的属性表示支持鸿蒙平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | -| `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` | Boolean indicating whether the tab bar bounces when scrolling. | boolean | No | All | yes | -| `gap` | Define a spacing between tabs. | number | No | All | yes | +如下是 tabview 已经HarmonyOS化的属性： + +> [!tip] "HarmonyOS支持"列为 yes 的属性表示支持HarmonyOS平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 + +**SceneMap**：用于 renderScene 道具的函数, 接受route.key 映射到 React 组件的对象 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------: | :------------------: | :-------------: | :------: | :------: | :---------------: | +| scenes | 创建元素的键值对 | Object | Yes | All | Yes | +| jumpTo | 导航到其他选项卡 | Function | No | All | Yes | + +**TabView**：选项卡组件 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------: | :------------------: | :-------------: | :------: | :------: | :---------------: | +| renderScene | 返回一个要呈现为选项卡的页面的反应元素 | Function | Yes | All | Yes | +| renderTabBar | 自定义 React Element 作为选项卡栏使用的回调 | Function | No | All | Yes | +| lazy | 是否延迟渲染场景的函数 | Function | No | All | Yes | +| lazyPreloadDistance | 启用lazy时，您可以指定使用此道具预加载多少相邻路由,默认为0 | Number | No | All | Yes | +| renderLazyPlaceholder | 启用lazy时,用于为尚未呈现的路由呈现的回调函数 | Function | No | All | Yes | +| keyboardDismissMode | 指示键盘是否在响应拖动手势时被解除,默认为"auto" | String | No | All | Yes | +| swipeEnabled | 指示是否启用滑动手势的布尔值,默认为true | Boolean | No | All | Yes | +| animationEnabled | 当更改选项卡时启用动画,默认为true | Boolean | No | All | Yes | +| onSwipeStart | 当滑动手势开始时调用的回调 | Function | No | All | Yes | +| onSwipeEnd | 当滑动手势结束时调用的回调 | Function | No | All | Yes | +| initialLayout | 该对象包含屏幕的初始高度和宽度 | Object | No | All | Yes | +| overScrollMode | 用于覆盖过滚动模式的默认值 仅安卓系统 | String | No | All | No | +| sceneContainerStyle | 样式应用于包装每个屏幕的视图 | Object | No | All | Yes | +| pagerStyle | 样式应用于包装所有场景的页导航视图 | Object | No | All | Yes | + + +**TabBar**：选项卡标签栏 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------: | :------------------: | :-------------: | :------: | :------: | :---------------: | +| renderIcon | 该函数接受一个具有当前路由、焦点状态和颜色的对象，并返回一个用作图标的自定义 React Element | Function | No | All | Yes | +| renderLabel | 该函数接受一个具有当前路由、聚焦状态和颜色的对象，并返回一个用作标签的自定义 React Element | Function | No | All | Yes | +| renderTabBarItem | 该函数接受 TabBarItemProps 对象并返回一个用作制表符按钮的自定义 React Element | Function | No | All | Yes | +| renderIndicator| 该函数接受具有当前路由的对象，并返回一个用作制表符指示符的自定义 React Element | Function | No | All | Yes | +| renderLabel | 该函数接受具有当前路由的对象，并返回一个用作徽章的自定义 React Element | Function | No | All | Yes | +| onTabPress | 在制表符上执行的功能它接收按下的选项卡的场景，对于像滚动到顶部这样的事情很有用。默认情况下，选项卡按下也会切换选项卡 | Function | No | All | Yes | +| onTabLongPress| 在制表符长按时执行的功能，用于显示具有更多选项的菜单 | Function | No | All | Yes | +| activeColor |活动选项卡中图标和标签的自定义颜色 | String | No | All | Yes | +| inactiveColor |非活动选项卡中图标和标签的自定义颜色 | String | No | All | Yes | +| pressColor | 材质波纹的颜色 | String | No | All | Yes | +| pressOpacity |按压选项卡的不透明度 | Number | No | All | Yes | +| scrollEnabled | 指示是否使选项卡栏可滚动 | Boolean | No | All | Yes | +| bounces | 指示滚动时选项卡栏是否反弹 | Boolean | No | All | Yes | +| tabStyle |样式以应用于选项卡栏中的各个选项卡项 | Object | No | All | Yes | +| indicatorStyle| 应用于活动指示器的样式 | Object | No | All | Yes | +| indicatorContainerStyle |样式应用于指示器的容器视图 | Object | No | All | Yes | +| labelStyle |要应用于选项卡项标签的样式 | Object | No | All | Yes | +| contentContainerStyle |样式应用于选项卡的内部容器 | Object | No | All | Yes | +| gap | 定义选项卡之间的间距 | Number | No | All | Yes | +| testID | tabBar的测试id | String | No | All | Yes | + +**TabBarIndicator**：选项卡指示器 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------: | :------------------: | :-------------: | :------: | :------: | :---------------: | +| getTabWidth | 获取当前元素的宽度 | Function | Yes | All | Yes | +| width | 元素宽度 | Number | Yes | All | Yes | + +**TabBarItem**：单个选项卡 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------: | :------------------: | :-------------: | :------: | :------: | :---------------: | +| route | 路由元素 | Object | Yes | All | Yes | + +**公共属性**： + +Common props 组件属性HarmonyOS侧支持情况 + +| Name | Description | Type | Default | Required | Platform | +| :--------------: | :-----------------------------------------: | :---------: | :-------: | :------: | :------: | +| navigationState| 选项卡视图的状态,对象包含激活路由的索引以及呈现选项卡的路由对象列表的数组 | Object | - | Yes | All | +| onIndexChange | 在选项卡更改时调用的回调，将接收新选项卡的索引作为参数。调用时需要更新导航状态，否则将删除更改。| Function | - | Yes | All | +| style | 要应用于容器的样式。 | Object | - | Yes | All | +| layout | 覆盖组件样式，宽高 | Object | - | No | All | +| tabBarPosition | 标签栏在标签视图中的位置 | String | "top" | No | Yes | +| position | 元素动画位置 | Animated.AnimatedInterpolation | - | Yes | All | +| getLabelText | 该函数接受具有当前路由的对象并返回选项卡的标签文本,默认情况下使用 route.title | Function | - | No | All | +| getTestID | 该函数接受具有当前路由的对象，并返回制表符按钮的测试 ID，以便在测试中定位该制表符按钮 | Function | - | No | All | +| getAccessible | 该函数接受具有当前路由的对象并返回一个布尔值 | Function | - | No | All | +| getAccessibilityLabel | 该函数接受具有当前路由的对象并返回制表符按钮的可访问性标签。如果指定，则默认使用 route.accessibilityLabel，否则使用路由标题 | Function | - | No |All | ## 遗留问题 - [x] 已解决： 页面滑动时，有概率卡在中间，无法自动回正[issue#5](https://github.com/react-native-oh-library/react-navigation/issues/5) ## 其他 - + ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md) ，请自由地享受和参与开源。 + + \ No newline at end of file -- Gitee