diff --git a/zh-cn/react-native-tab-view.md b/zh-cn/react-native-tab-view.md index 4b644241ae04356b148e5259739ac1ca9483ba7c..c00bcec98388c1cb91eff2740674e3585f944315 100644 --- a/zh-cn/react-native-tab-view.md +++ b/zh-cn/react-native-tab-view.md @@ -1,4 +1,3 @@ - > 模板版本:v0.2.2

@@ -13,7 +12,7 @@

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig) ## 安装与使用 @@ -209,89 +208,58 @@ const styles = StyleSheet.create({ ## 属性 -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 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 | Callback which returns a react element to render as the page for the tab | Function | Yes | All | Yes | -| renderTabBar | Callback which returns a custom React Element to use as the tab bar | Function | No | All | Yes | -| lazy |Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes | Function | No | All | Yes | -| lazyPreloadDistance | When lazy is enabled, you can specify how many adjacent routes should be preloaded with this prop.This value defaults to 0 which means lazy pages are loaded as they come into the viewport | Number | No | All | Yes | -| renderLazyPlaceholder | Callback which returns a custom React Element to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The lazy prop also needs to be enabled | Function | No | All | Yes | -| keyboardDismissMode | String indicating whether the keyboard gets dismissed in response to a drag gesture. 'auto' (default) | String | No | All | Yes | -| swipeEnabled | Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default | Boolean | No | All | Yes | -| animationEnabled |Enables animation when changing tab. By default it's true | Boolean | No | All | Yes | -| onSwipeStart | Callback which is called when the swipe gesture starts, i.e. the user touches the screen and moves it | Function | No | All | Yes | -| onSwipeEnd | Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture | Function | No | All | Yes | -| initialLayout | Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance | Object | No | All | Yes | -| overScrollMode | Used to override default value of pager's overScroll mode | String | No | All | Yes | -| sceneContainerStyle | Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping | Object | No | All | Yes | -| pagerStyle | Style to apply to the pager view wrapping all the scenes | Object | No | All | Yes | - - -**TabBar**:选项卡标签栏 - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :-----------------: | :------------------: | :-------------: | :------: | :------: | :---------------: | -| renderIcon | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon | Function | No | All | Yes | -| renderLabel | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a label | Function | No | All | Yes | -| renderTabBarItem | Function which takes a TabBarItemProps object and returns a custom React Element to be used as a tab button | Function | No | All | Yes | -| renderIndicator| Function which takes an object with the current route and returns a custom React Element to be used as a tab indicator | Function | No | All | Yes | -| onTabPress | Function to execute on tab press. It receives the scene for the pressed tab, useful for things like scroll to top. | Function | No | All |Yes | -| onTabLongPress| Function to execute on tab long press, use for things like showing a menu with more options | Function | 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 | -| pressColor | Color for material ripple | String | No | All | Yes | -| pressOpacity |Opacity for pressed tab | Number | 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 | -| tabStyle |Style to apply to the individual tab items in the tab bar | Object | No | All | Yes | -| indicatorStyle| Style to apply to the active indicator | Object | No | All | Yes | -| indicatorContainerStyle |Style to apply to the container view for the indicator | Object | No | All | Yes | -| labelStyle |Style to apply to the tab item label | Object | No | All | Yes | -| contentContainerStyle |Style to apply to the inner container for tabs | Object | No | All | Yes | -| gap | Define a spacing between tabs | Number | No | All | Yes | -| testID | Test id for the tabBar. Can be used for scrolling the tab bar in tests | 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 | HarmonyOS Support | -| :--------------: | :-----------------------------------------: | :---------: | :-------: | :------: | :------: | :---------------: | -| navigationState| 选项卡视图的状态,对象包含激活路由的索引以及呈现选项卡的路由对象列表的数组 | Object | - | Yes | All | Yes | -| onIndexChange | 在选项卡更改时调用的回调,将接收新选项卡的索引作为参数。调用时需要更新导航状态,否则将删除更改。| Function | - | Yes | All | Yes | -| style | 要应用于容器的样式。 | Object | - | Yes | All | Yes | -| layout | 覆盖组件样式,宽高 | Object | - | No | All | Yes | -| tabBarPosition | 标签栏在标签视图中的位置 | String | "top" | No | All | Yes | -| position | 元素动画位置 | Animated.AnimatedInterpolation | - | Yes | All | Yes | -| getLabelText | 该函数接受具有当前路由的对象并返回选项卡的标签文本,默认情况下使用 route.title | Function | - | No | All |Yes | -| getTestID | 该函数接受具有当前路由的对象,并返回制表符按钮的测试 ID,以便在测试中定位该制表符按钮 | Function | - | No | All |Yes | -| getAccessible | 该函数接受具有当前路由的对象并返回一个布尔值 | Function | - | No | All |Yes | -| getAccessibilityLabel | 该函数接受具有当前路由的对象并返回制表符按钮的可访问性标签。如果指定,则默认使用 route.accessibilityLabel,否则使用路由标题 | Function | - | No |All |Yes | +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +**Props** +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|----------|----------|-------------------| +| navigationState | State for the tab view. | fucntion | yes | all | yes | +| onIndexChange  | Callback which is called on tab change, receives the index of the new tab as argument. The navigation state needs to be updated when it's called, otherwise the change is dropped. | function | yes | all | yes | +| renderScene  | Callback which returns a react element to render as the page for the tab. | function | yes | 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.  | 'top'|'bottom' | no | all | yes | +| lazy | Function which takes an object with the current route and returns a boolean to indicate whether to lazily render the scenes. | function | no | all | yes | +| lazyPreloadDistance | When lazy is enabled, you can specify how many adjacent routes should be preloaded with this prop. This value defaults to 0 which means lazy pages are loaded as they come into the viewport. | number | no | all | yes | +| renderLazyPlaceholder | Callback which returns a custom React Element to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The lazy prop also needs to be enabled. | string | no | all | yes | +| keyboardDismissMode | String indicating whether the keyboard gets dismissed in response to a drag gesture.  | 'auto'|'on-drag'|'none' | no | all | yes | +| swipeEnabled | Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing false will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | no | all | yes | +| animationEnabled | Enables animation when changing tab. By default it's true. | boolean | no | all | yes | +| onSwipeStart | Callback which is called when the swipe gesture starts, i.e. the user touches the screen and moves it. | boolean | no | all | yes | +| onSwipeEnd | Callback which is called when the swipe gesture ends, i.e. the user lifts their finger from the screen after the swipe gesture. | boolean | no | all | yes | +| initialLayout | Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. | object | no | all | yes | +| overScrollMode | Used to override default value of pager's overScroll mode. Can be auto, always or never (Android only). | 'auto'|'always'|'never' | no | Android | yes | +| sceneContainerStyle | Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping | object | no | all | yes | +| pagerStyle | Style to apply to the pager view wrapping all the scenes. | object | no | all | yes | +| style | Style to apply to the tab view container. | object | no | all | yes | + +**TabBar Props** +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------|----------|-------------------| +| getLabelText | Function which takes an object with the current route and returns the label text for the tab. Uses route.title by default. | function | no | all | yes | +| getAccessible | Function which takes an object with the current route and returns a boolean to indicate whether to mark a tab as accessible. Defaults to true. | function | no | all | yes | +| getAccessibilityLabel | Function which takes an object with the current route and returns a accessibility label for the tab button. Uses route.accessibilityLabel by default if specified, otherwise uses the route title. | function | no | all | yes | +| renderIcon | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a icon. | function | no | all | yes | +| renderLabel | Function which takes an object with the current route, focused status and color and returns a custom React Element to be used as a label. | function | no | all | yes | +| renderTabBarItem | Function which takes a TabBarItemProps object and returns a custom React Element to be used as a tab button. | function | no | all | yes | +| renderIndicator | Function which takes an object with the current route and returns a custom React Element to be used as a tab indicator. | function | no | all | yes | +| renderBadge | Function which takes an object with the current route and returns a custom React Element to be used as a badge. | function | no | all | yes | +| onTabPress | Function to execute on tab press. It receives the scene for the pressed tab, useful for things like scroll to top. | function | no | all | yes | +| onTabLongPress | Function to execute on tab long press, use for things like showing a menu with more options | function | 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 | +| pressColor | Color for material ripple (Android >= 5.0 only). | string | no | Android | no | +| pressOpacity | Opacity for pressed tab (iOS and Android < 5.0 only). | number | 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 | no | +| tabStyle | Style to apply to the individual tab items in the tab bar. | object | no | all | yes | +| indicatorStyle | Style to apply to the active indicator. | object | no | all | yes | +| indicatorContainerStyle | Style to apply to the container view for the indicator. | object | no | all | yes | +| labelStyle | Style to apply to the tab item label. | object | no | all | yes | +| contentContainerStyle | Style to apply to the inner container for tabs. | object | no | all | yes | +| style (TabBar) | Style to apply to the tab bar container. | object | no | all | yes | +| gap | Define a spacing between tabs. | number | no | all | yes | ## 遗留问题 @@ -301,6 +269,4 @@ Common props 组件属性 HarmonyOS 侧支持情况 ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md) ,请自由地享受和参与开源。 - - \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md) ,请自由地享受和参与开源。 \ No newline at end of file