diff --git a/en/react-native-localization-settings.md b/en/react-native-localization-settings.md
index 0b1815dd8a7c70b9f380e71968e7b427d797df7f..bdafb4c255c695119d894e17a289654e44b99d7a 100644
--- a/en/react-native-localization-settings.md
+++ b/en/react-native-localization-settings.md
@@ -13,11 +13,17 @@
-> [!TIP] [ GitHub address](https://github.com/react-native-oh-library/react-native-localization-settings)
+This project is based on [react-native-localization-settings](https://github.com/react-native-oh-library/react-native-localization-settings).
-## Installation and Usage
+This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is:`@react-native-ohos/checkbox`, The version correspondence details are as follows:
+
+| Version | Package Name | Repository | Release |Support RN version|
+|-------------| ------------------------------------------------- | ------------------ | -------------------------- |-------------------|
+| 1.0.2-0.0.1 | @react-native-oh-tpl/react-native-localization-settings | [Github](https://github.com/react-native-oh-library/react-native-localization-settings) | [Github Releases](https://github.com/react-native-oh-library/react-native-localization-settings/releases) |0.72 |
+| 1.2.1 | @react-native-ohos/react-native-localization-settings | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-localization-settings) | [GitCode Releases]() |0.77 |
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-localization-settings Releases](https://github.com/react-native-oh-library/react-native-localization-settings/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package.
+
+## Installation and Usage
Go to the project directory and execute the following instruction:
@@ -26,13 +32,21 @@ Go to the project directory and execute the following instruction:
#### **npm**
```bash
+
+# 0.72
npm install @react-native-oh-tpl/react-native-localization-settings
+
+# 0.77
+npm install @react-native-ohos/react-native-localization-settings
```
#### **yarn**
-
```bash
+# 0.72
yarn add @react-native-oh-tpl/react-native-localization-settings
+
+# 0.77
+yarn add @react-native-ohos/react-native-localization-settings
```
@@ -145,6 +159,8 @@ Method 1 (recommended): Use the HAR file.
Open `entry/oh-package.json5` file and add the following dependencies:
+- 0.72
+
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
@@ -152,6 +168,15 @@ Open `entry/oh-package.json5` file and add the following dependencies:
}
```
+- 0.77
+
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@react-native-ohos/react-native-localization-settings": "file:../../node_modules/@react-native-ohos/react-native-localization-settings/harmony/localization_settings.har"
+ }
+```
+
Click the `sync` button in the upper right corner.
Alternatively, run the following instruction on the terminal:
@@ -200,7 +225,8 @@ Then build and run the code.
To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-localization-settings Releases](https://github.com/react-native-oh-tpl/react-native-localization-settings/releases)
+1. RNOH: 0.72.27; SDK: HarmonyOS 5.1.1 Release SDK; IDE: DevEco Studio 5.1.1 Release; ROM: 5.0.1.120;
+2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
## Static Methods
diff --git a/en/react-navigation-bottom-tabs.md b/en/react-navigation-bottom-tabs.md
index 0bd694ab5307db8773fbb56a288a08b7858264de..a1d6efea39d935978b4915f80387afeccbb1d17d 100644
--- a/en/react-navigation-bottom-tabs.md
+++ b/en/react-navigation-bottom-tabs.md
@@ -4,33 +4,43 @@
@react-navigation/bottom-tabs
-
+
-
+
-> [!TIP] [GitHub address](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs)
+| Version | Support RN version |
+| ---------- | ---------- |
+| 6.5.20 | 0.72 |
+| 7.3.10 | 0.77 |
## Installation and Usage
Go to the project directory and execute the following instruction:
-
#### **npm**
```bash
+# 0.72
npm install @react-navigation/bottom-tabs@6.5.20
+
+# 0.77
+npm install @react-navigation/bottom-tabs@7.3.10
```
#### **yarn**
```bash
+# 0.72
yarn add @react-navigation/bottom-tabs@6.5.20
+
+# 0.77
+yarn add @react-navigation/bottom-tabs@7.3.10
```
@@ -94,8 +104,9 @@ This document is verified based on the following versions:
1. RNOH: 0.72.11; SDK: OpenHarmony(api11) 4.1.0.53; IDE: DevEco Studio 4.1.3.412; ROM: 2.0.0.52;
2. RNOH: 0.72.13; SDK: HarmonyOS NEXT Developer Preview1; IDE: DevEco Studio 4.1.3.500; ROM: 2.0.0.58;
-3. RNOH: 0.72.20-CAPI; SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18;
-4. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25;
+3. RNOH: 0.72.20-CAPI: SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18;
+4. RNOH: 0.72.27; SDK: HarmonyOS 5.1.1 Release SDK; IDE: DevEco Studio 5.1.1 Release; ROM: 5.0.1.120;
+5. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
## Properties
@@ -108,26 +119,29 @@ For details, see [react-navigation/bottom-tabs](https://reactnavigation.org/docs
**Props**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -------- | ----------- | ----------------- |
-| id | Optional unique ID for the navigator. This can be used with navigation.getParent to refer to this navigator in a child navigator. | string | no | all | yes |
+| id | Optional unique ID for the navigator. This can be used with navigation.getParent to refer to this navigator in a child navigator. | string | no | all | yes |
| initialRouteName | The name of the route to render on first load of the navigator. | string | no | all | yes |
| screenOptions | Default options to use for the screens in the navigator. | object | no | all | yes |
-| backBehavior | This controls what happens when goBack is called in the navigator. This includes pressing the device's back button or back gesture on Android. | 'firstRoute'|'initialRoute'|'order'|'history'|'none' | no | Android | yes |
-| detachInactiveScreens | Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with react-native-screens. Defaults to true. | boolean | no | Android,iOS | no |
-| sceneContainerStyle | Style object for the component wrapping the screen content. | object | no | all | yes |
+| backBehavior | This controls what happens when goBack is called in the navigator. This includes pressing the device's back button or back gesture on Android. | 'firstRoute'|'initialRoute'|'order'|'history'|'none' | no | Android | yes |
+| detachInactiveScreens | Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with react-native-screens. Defaults to true. | boolean | no | Android,iOS | no |
+| sceneContainerStyledeprecated from 7.3.10 | Style object for the component wrapping the screen content. | object | no | all | yes |
| tabBar | tabBar | function | no | all | yes |
+| layout7.3.10+ | A layout is a wrapper around the navigator. | object | no | all | yes |
+| screenLayout7.3.10+ | A screen layout is a wrapper around each screen in the navigator. | object | no | all | yes |
+| screenListeners7.3.10+ | listeners for events from all screens for this navigator. | object | no | all | yes |
**Options & screenOptions**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------- | ----------- | ----------------- |
-| title | Generic title that can be used as a fallback for headerTitle and tabBarLabel. | string | no | all | yes |
-| tabBarLabel | Title string of a tab displayed in the tab bar or a function that given { focused: boolean, color: string } returns a React.Node, | function | no | all | yes |
-| tabBarShowLabel | Whether the tab label should be visible. Defaults to true. | boolean | no | all | yes |
+| title | Generic title that can be used as a fallback for headerTitle and tabBarLabel. | string | no | all | yes |
+| tabBarLabel | Title string of a tab displayed in the tab bar or a function that given { focused: boolean, color: string } returns a React.Node, | function | no | all | yes |
+| tabBarShowLabel | Whether the tab label should be visible. Defaults to true. | boolean | no | all | yes |
| tabBarLabelPosition | Whether the label is shown below the icon or beside the icon. | 'below-icon'|'beside-icon' | no | all | yes |
| tabBarLabelStyle | Style object for the tab label. | object | no | all | yes |
-| tabBarIcon | Function that given { focused: boolean, color: string, size: number } returns a React.Node, to display in the tab bar. | function | no | all | yes |
+| tabBarIcon | Function that given { focused: boolean, color: string, size: number } returns a React.Node, to display in the tab bar. | function | no | all | yes |
| tabBarIconStyle | Style object for the tab icon. | object | no | all | yes |
-| tabBarBadge | Text to show in a badge on the tab icon. Accepts a string or a number. | string|number | no | all | yes |
+| tabBarBadge | Text to show in a badge on the tab icon. Accepts a string or a number. | string|number | no | all | yes |
| tabBarBadgeStyle | Style for the badge on the tab icon. You can specify a background color or text color here. | object | no | all | yes |
| tabBarAccessibilityLabel | Accessibility label for the tab button. | string | no | all | yes |
| tabBarButton | Function which returns a React element to render as the tab bar button. | function | no | all | yes |
@@ -135,19 +149,24 @@ For details, see [react-navigation/bottom-tabs](https://reactnavigation.org/docs
| tabBarInactiveTintColor | Color for the icon and label in the inactive tabs. | string | no | all | yes |
| tabBarActiveBackgroundColor | Background color for the active tab. | string | no | all | yes |
| tabBarInactiveBackgroundColor | Background color for the inactive tabs. | string | no | all | yes |
-| tabBarHideOnKeyboard | Whether the tab bar is hidden when the keyboard opens. Defaults to false. | boolean | no | all | yes |
+| tabBarHideOnKeyboard | Whether the tab bar is hidden when the keyboard opens. Defaults to false. | boolean | no | all | yes |
| tabBarItemStyle | Style object for the tab item container. | object | no | all | yes |
| tabBarStyle | Style object for the tab bar. You can configure styles such as background color here. | object | no | all | yes |
| tabBarBackground | Function which returns a React Element to use as background for the tab bar. | function | no | all | yes |
| lazy | Whether this screens should render the first time it's accessed. | boolean | no | all | yes |
-| unmountOnBlur | Whether this screen should be unmounted when navigating away from it. | boolean | no | all | yes |
-| freezeOnBlur | Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to false. Defaults to true when enableFreeze() from react-native-screens package is run at the top of the application. | boolean | no | Android,iOS | no | |
+| unmountOnBlurdeprecated from 7.3.10 | Whether this screen should be unmounted when navigating away from it. | boolean | no | all | yes |
+| freezeOnBlur | Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to false. Defaults to true when enableFreeze() from react-native-screens package is run at the top of the application. | boolean | no | Android,iOS | no | |
+| tabBarPosition7.3.10+ | Position of the tab bar. | 'bottom'\| 'top' \| 'left' \| 'right' | no | all | yes | |
+| tabBarVariant7.3.10+ | Variant of the tab bar.The material variant is currently only supported when the tabBarPosition is set to left or right. | 'uikit'\| 'material' | no | all | yes | |
+| popToTopOnBlur7.3.10+ | Boolean indicating whether any nested stack should be popped to the top of the stack when navigating away from this tab. | boolean | no | all | yes | |
+| sceneStyle7.3.10+ | Style object for the component wrapping the screen content. | object | no | all | yes | |
+
**Header related options**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ----------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
| header | Custom header to use instead of the default header. | function | no | all | yes |
-| headerShown | Whether to show or hide the header for the screen. The header is shown by default. Setting this to false hides the header. | boolean | no | all | yes |
+| headerShown | Whether to show or hide the header for the screen. The header is shown by default. Setting this to false hides the header. | boolean | no | all | yes |
**Events**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
@@ -155,6 +174,11 @@ For details, see [react-navigation/bottom-tabs](https://reactnavigation.org/docs
| tabPress | This event is fired when the user presses the tab button for the current screen in the tab bar. | function | no | all | yes |
| tabLongPress | This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period. | function | no | all | yes |
+**Hooks**
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- |
+| useBottomTabBarHeight7.3.10+ | This hook returns the height of the bottom tab bar. By default, the screen content doesn't go under the tab bar. | function | no | all | yes |
+
## Known Issues
## Others
diff --git a/en/react-navigation-elements.md b/en/react-navigation-elements.md
index 8a1444107939f65d6cd47673c0459a8154de7f55..502853e29a85c0e78c22dab350e1bab90e39dd64 100644
--- a/en/react-navigation-elements.md
+++ b/en/react-navigation-elements.md
@@ -4,36 +4,46 @@
@react-navigation/elements
-
+
-
+
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements)
+This project is based on [@react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs).
+This third-party library has been migrated to Gitcode and is now available for direct download from npm, the new package name is:`@react-native-ohos/elements`, The version correspondence details are as follows:
-## 安装与使用
+| Version | Package Name | Repository | Release |Support RN version|
+| ------------------------- |----------------------------------------| ------------------ | -------------------------- |-------------------|
+| 1.3.21 | @react-native-oh-tpl/elements | [Github](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements) | [Github Releases](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements/releases) |0.72 |
+| 2.3.9 |@react-native-ohos/elements | [Github](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/br_rnoh0.77/packages/elements) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-navigation/releases) |0.77 |
-Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/elements Releases](https://github.com/react-native-oh-library/react-navigation/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package.
+## 安装与使用
进入到工程目录并输入以下命令：
-
#### **npm**
```bash
+# 0.72
npm install @react-native-oh-tpl/elements
+
+# 0.77
+npm install @react-native-ohos/elements
```
#### **yarn**
-
```bash
+# 0.72
yarn add @react-native-oh-tpl/elements
+
+# 0.77
+yarn add @react-native-ohos/elements
```
@@ -81,9 +91,10 @@ export default NavigationElements;
## 兼容性
-要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases?q=elements&expanded=true)
+1. RNOH: 0.72.27; SDK: HarmonyOS 5.1.1 Release SDK; IDE: DevEco Studio 5.1.1 Release; ROM: 5.0.1.120;
+2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
## 属性
@@ -114,7 +125,10 @@ export default NavigationElements;
| headerTransparent | Defaults to false. If true, the header will not have a background unless you explicitly provide it with headerBackground. | boolean | no | all | yes |
| headerBackground | Function which returns a React Element to render as the background of the header. | function | no | all | yes |
| headerStatusBarHeight | Extra padding to add at the top of header to account for translucent status bar. | number | no | all | yes |
-
+| headerSearchBarOptions2.3.8+ | Options for the search bar in the header. | object | no | all | yes |
+| HeaderButton2.3.8+ | A component used to show a button in header. | function | no | all | yes |
+| Button2.3.8+ | A component that renders a button. | function | no | all | yes |
+| Label2.3.8+ | The Label component is used to render small text | function | no | all | yes |
**Header Components Props**
diff --git a/zh-cn/react-native-localization-settings.md b/zh-cn/react-native-localization-settings.md
index 2935eb390744f84e56ba97bc9650688f14c544f9..2115670190c55af7e33e4ceead4f7b1d160d8ac4 100644
--- a/zh-cn/react-native-localization-settings.md
+++ b/zh-cn/react-native-localization-settings.md
@@ -13,11 +13,16 @@
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-localization-settings)
+本项目基于 [react-native-localization-settings](https://github.com/jakex7/react-native-localization-settings) 开发。
-## 安装与使用
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-localization-settings`，具体版本所属关系如下：
+
+| Version | Package Name | Repository | Release |Support RN version|
+|-------------| ------------------------------------------------- | ------------------ | -------------------------- |-------------------|
+| 1.0.2-0.0.1 | @react-native-oh-tpl/react-native-localization-settings | [Github](https://github.com/react-native-oh-library/react-native-localization-settings) | [Github Releases](https://github.com/react-native-oh-library/react-native-localization-settings/releases) |0.72 |
+| 1.2.1 | @react-native-ohos/react-native-localization-settings | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-native-localization-settings) | [GitCode Releases]() |0.77 |
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-localization-settings Releases](https://github.com/react-native-oh-library/react-native-localization-settings/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+## 安装与使用
进入到工程目录并输入以下命令：
@@ -26,13 +31,22 @@
#### **npm**
```bash
+
+# 0.72
npm install @react-native-oh-tpl/react-native-localization-settings
+
+# 0.77
+npm install @react-native-ohos/react-native-localization-settings
```
#### **yarn**
```bash
+# 0.72
yarn add @react-native-oh-tpl/react-native-localization-settings
+
+# 0.77
+yarn add @react-native-ohos/react-native-localization-settings
```
@@ -149,6 +163,8 @@ const styles = StyleSheet.create({
打开 `entry/oh-package.json5`，添加以下依赖
+- 0.72
+
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
@@ -156,6 +172,15 @@ const styles = StyleSheet.create({
}
```
+- 0.77
+
+```json
+"dependencies": {
+"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+"@react-native-ohos/react-native-localization-settings": "file:../../node_modules/@react-native-ohos/react-native-localization-settings/harmony/localization_settings.har"
+}
+```
+
点击右上角的 `sync` 按钮
或者在终端执行：
@@ -204,7 +229,8 @@ ohpm install
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-localization-settings Releases](https://github.com/react-native-oh-tpl/react-native-localization-settings/releases)
+1. RNOH: 0.72.27; SDK: HarmonyOS 5.1.1 Release SDK; IDE: DevEco Studio 5.1.1 Release; ROM: 5.0.1.120;
+2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
## 静态方法
@@ -214,11 +240,11 @@ ohpm install
> [!TIP] 在设置改变语言之前，确保手机系统添加相应语言
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| -------------------------- | ------------------------------------- | -------- | -------- | ----------- | ----------------- |
-| I18nLanguageDetectorModule | i18next language detector | function | no | iOS/Android | yes |
-| getLanguage() | Function to get current language. | function | no | iOS/Android | yes |
-| setLanguage() | Function to set the current language. | function | no | iOS/Android | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------------------- |-------------| -------- | -------- | ----------- | ----------------- |
+| I18nLanguageDetectorModule | i18next语言检测器 | function | no | iOS/Android | yes |
+| getLanguage() | 获取当前语言 | function | no | iOS/Android | yes |
+| setLanguage() | 设置当前语言 | function | no | iOS/Android | yes |
## 遗留问题
diff --git a/zh-cn/react-navigation-bottom-tabs.md b/zh-cn/react-navigation-bottom-tabs.md
index 32c9511fcba6888b3d7b779067ab367fd97e2736..75a44aa5e9c585a70a5e31dc27ebfc92282116a2 100644
--- a/zh-cn/react-navigation-bottom-tabs.md
+++ b/zh-cn/react-navigation-bottom-tabs.md
@@ -12,25 +12,35 @@
-> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs)
+| 三方库版本 | 支持RN版本 |
+| ---------- | ---------- |
+| 6.5.20 | 0.72 |
+| 7.3.10 | 0.77 |
## 安装与使用
进入到工程目录并输入以下命令：
-
#### **npm**
```bash
+# 0.72
npm install @react-navigation/bottom-tabs@6.5.20
+
+# 0.77
+npm install @react-navigation/bottom-tabs@7.3.10
```
#### **yarn**
```bash
+# 0.72
yarn add @react-navigation/bottom-tabs@6.5.20
+
+# 0.77
+yarn add @react-navigation/bottom-tabs@7.3.10
```
@@ -95,8 +105,9 @@ export function NavigationBottomTabs() {
1. RNOH: 0.72.11; SDK: OpenHarmony(api11) 4.1.0.53; IDE: DevEco Studio 4.1.3.412; ROM: 2.0.0.52;
2. RNOH: 0.72.13; SDK: HarmonyOS NEXT Developer Preview1; IDE: DevEco Studio 4.1.3.500; ROM: 2.0.0.58;
-3. RNOH: 0.72.20-CAPI; SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18;
-4. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25;
+3. RNOH: 0.72.20-CAPI: SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18;
+4. RNOH: 0.72.27; SDK: HarmonyOS 5.1.1 Release SDK; IDE: DevEco Studio 5.1.1 Release; ROM: 5.0.1.120;
+5. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
## 属性
@@ -107,54 +118,71 @@ export function NavigationBottomTabs() {
以下属性已验证，更多属性详情请查看 [react-navigation/bottom-tabs 的文档介绍](https://reactnavigation.org/docs/bottom-tab-navigator)
**Props**
+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -------- | ----------- | ----------------- |
-| id | Optional unique ID for the navigator. This can be used with navigation.getParent to refer to this navigator in a child navigator. | string | no | all | yes |
-| initialRouteName | The name of the route to render on first load of the navigator. | string | no | all | yes |
-| screenOptions | Default options to use for the screens in the navigator. | object | no | all | yes |
-| backBehavior | This controls what happens when goBack is called in the navigator. This includes pressing the device's back button or back gesture on Android. | 'firstRoute'|'initialRoute'|'order'|'history'|'none' | no | Android | yes |
-| detachInactiveScreens | Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with react-native-screens. Defaults to true. | boolean | no | Android,iOS | no |
-| sceneContainerStyle | Style object for the component wrapping the screen content. | object | no | all | yes |
-| tabBar | tabBar | function | no | all | yes |
+| id | 导航器的可选唯一 ID。这可用于在子导航器中通过 navigation.getParent 引用此导航器。 | string | no | all | yes |
+| initialRouteName | 导航器首次加载时要渲染的路由名称。 | string | no | all | yes |
+| screenOptions | 用于导航器中屏幕的默认选项。 | object | no | all | yes |
+| backBehavior | 控制当在导航器中调用 goBack 时发生的行为（包括在 Android 上按下设备的返回键或执行返回手势）。 | 'firstRoute'|'initialRoute'|'order'|'history'|'none' | no | Android | yes |
+| detachInactiveScreens | 用于指示是否应从视图层次结构中分离非活动屏幕以节省内存的布尔值。这实现了与 react-native-screens 的集成。默认为 true。 | boolean | no | Android,iOS | no |
+| sceneContainerStyledeprecated from 7.3.10 | 包裹屏幕内容的组件的样式对象。 | object | no | all | yes |
+| tabBar | 标签栏 | function | no | all | yes |
+| layout7.3.10+ | 布局，是导航器的包装器。 | object | no | all | yes |
+| screenLayout7.3.10+ | 屏幕布局，是导航器中每个屏幕的包装器。 | object | no | all | yes |
+| screenListeners7.3.10+ | 用于监听此导航器所有屏幕事件的监听器。 | object | no | all | yes |
**Options & screenOptions**
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------- | ----------- | ----------------- |
-| title | Generic title that can be used as a fallback for headerTitle and tabBarLabel. | string | no | all | yes |
-| tabBarLabel | Title string of a tab displayed in the tab bar or a function that given { focused: boolean, color: string } returns a React.Node, | function | no | all | yes |
-| tabBarShowLabel | Whether the tab label should be visible. Defaults to true. | boolean | no | all | yes |
-| tabBarLabelPosition | Whether the label is shown below the icon or beside the icon. | 'below-icon'|'beside-icon' | no | all | yes |
-| tabBarLabelStyle | Style object for the tab label. | object | no | all | yes |
-| tabBarIcon | Function that given { focused: boolean, color: string, size: number } returns a React.Node, to display in the tab bar. | function | no | all | yes |
-| tabBarIconStyle | Style object for the tab icon. | object | no | all | yes |
-| tabBarBadge | Text to show in a badge on the tab icon. Accepts a string or a number. | string|number | no | all | yes |
-| tabBarBadgeStyle | Style for the badge on the tab icon. You can specify a background color or text color here. | object | no | all | yes |
-| tabBarAccessibilityLabel | Accessibility label for the tab button. | string | no | all | yes |
-| tabBarButton | Function which returns a React element to render as the tab bar button. | function | no | all | yes |
-| tabBarActiveTintColor | Color for the icon and label in the active tab. | string | no | all | yes |
-| tabBarInactiveTintColor | Color for the icon and label in the inactive tabs. | string | no | all | yes |
-| tabBarActiveBackgroundColor | Background color for the active tab. | string | no | all | yes |
-| tabBarInactiveBackgroundColor | Background color for the inactive tabs. | string | no | all | yes |
-| tabBarHideOnKeyboard | Whether the tab bar is hidden when the keyboard opens. Defaults to false. | boolean | no | all | yes |
-| tabBarItemStyle | Style object for the tab item container. | object | no | all | yes |
-| tabBarStyle | Style object for the tab bar. You can configure styles such as background color here. | object | no | all | yes |
-| tabBarBackground | Function which returns a React Element to use as background for the tab bar. | function | no | all | yes |
-| lazy | Whether this screens should render the first time it's accessed. | boolean | no | all | yes |
-| unmountOnBlur | Whether this screen should be unmounted when navigating away from it. | boolean | no | all | yes |
-| freezeOnBlur | Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to false. Defaults to true when enableFreeze() from react-native-screens package is run at the top of the application. | boolean | no | Android,iOS | no | |
+| title | 通用标题，可用作 headerTitle 和 tabBarLabel 的回退值。。 | string | no | all | yes |
+| tabBarLabel | 显示在标签栏中的标签标题字符串，或一个接收 { focused: boolean, color: string } 并返回 React.Node 的函数。 | function | no | all | yes |
+| tabBarShowLabel | 标签文字是否应可见。默认为 true。 | boolean | no | all | yes |
+| tabBarLabelPosition | 标签是显示在图标下方还是图标旁边。 | 'below-icon'|'beside-icon' | no | all | yes |
+| tabBarLabelStyle | 标签文字的样式对象。 | object | no | all | yes |
+| tabBarIcon | 接收{ focused: boolean, color: string, size: number }并返回一个 React.Node 以在标签栏中显示的函数。 | function | no | all | yes |
+| tabBarIconStyle | 标签图标的样式对象。 | object | no | all | yes |
+| tabBarBadge | 在标签图标徽章上显示的文本。接受字符串或数字。 | string|number | no | all | yes |
+| tabBarBadgeStyle | 标签图标上徽章的样式。您可以在此处指定背景颜色或文本颜色。 | object | no | all | yes |
+| tabBarAccessibilityLabel | 标签按钮的无障碍功能标签。 | string | no | all | yes |
+| tabBarButton | 返回一个 React 元素作为标签栏按钮渲染的函数。 | function | no | all | yes |
+| tabBarActiveTintColor | 活动标签中图标和标签的颜色。 | string | no | all | yes |
+| tabBarInactiveTintColor | 非活动标签中图标和标签的颜色。 | string | no | all | yes |
+| tabBarActiveBackgroundColor | 活动标签的背景颜色。 | string | no | all | yes |
+| tabBarInactiveBackgroundColor | 非活动标签的背景颜色。 | string | no | all | yes |
+| tabBarHideOnKeyboard | 键盘打开时是否隐藏标签栏。默认为 false。 | boolean | no | all | yes |
+| tabBarItemStyle | 标签项容器的样式对象。 | object | no | all | yes |
+| tabBarStyle | 标签栏的样式对象。您可以在此处配置背景颜色等样式。 | object | no | all | yes |
+| tabBarBackground | 返回一个 React 元素用作标签栏背景的函数。 | function | no | all | yes |
+| lazy | 此屏幕是否应在首次被访问时渲染。 | boolean | no | all | yes |
+| unmountOnBlurdeprecated from 7.3.10 | 在离开此屏幕时是否应卸载它。 | boolean | no | all | yes |
+| freezeOnBlur | 布尔值，指示是否防止非活动屏幕重新渲染。默认为 false。如果在应用程序顶部运行了来自 react-native-screens 包的 enableFreeze()，则默认为 true。 | boolean | no | Android,iOS | no | |
+| tabBarPosition7.3.10+ | 标签栏的位置。 | 'bottom'\| 'top' \| 'left' \| 'right' | no | all | yes | |
+| tabBarVariant7.3.10+ | 标签栏的变体。Material 变体目前仅在 tabBarPosition 设置为 left 或 right 时受支持。 | 'uikit'\| 'material' | no | all | yes | |
+| popToTopOnBlur7.3.10+ | 布尔值，指示在离开此标签时，任何嵌套的堆栈是否应弹出到堆栈顶部。 | boolean | no | all | yes | |
+| sceneStyle7.3.10+ | 包裹屏幕内容的组件的样式对象。 | object | no | all | yes | |
**Header related options**
+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ----------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
-| header | Custom header to use instead of the default header. | function | no | all | yes |
-| headerShown | Whether to show or hide the header for the screen. The header is shown by default. Setting this to false hides the header. | boolean | no | all | yes |
+| header | 用于替代默认标题栏的自定义标题栏。 | function | no | all | yes |
+| headerShown | 是否显示或隐藏屏幕的标题栏。默认显示标题栏。将其设置为 false 会隐藏标题栏。 | boolean | no | all | yes |
**Events**
+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------------ | ---------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
-| tabPress | This event is fired when the user presses the tab button for the current screen in the tab bar. | function | no | all | yes |
-| tabLongPress | This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period. | function | no | all | yes |
+| tabPress | 当用户在标签栏中按下当前屏幕的标签按钮时触发此事件。 | function | no | all | yes |
+| tabLongPress | 当用户在标签栏中长时间按下当前屏幕的标签按钮时触发此事件。 | function | no | all | yes |
+
+**Hooks**
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- |
+| useBottomTabBarHeight7.3.10+ | 此钩子返回底部标签栏的高度。默认情况下，屏幕内容不会延伸到标签栏下方。 | function | no | all | yes |
+
## 遗留问题
@@ -162,4 +190,4 @@ export function NavigationBottomTabs() {
## 开源协议
-本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/bottom-tabs/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/main/packages/bottom-tabs/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
diff --git a/zh-cn/react-navigation-elements.md b/zh-cn/react-navigation-elements.md
index a9f705c41b46e631b164df91844bd75e8d97d787..a917480fab05f385c894110bf208cdae79bdd694 100644
--- a/zh-cn/react-navigation-elements.md
+++ b/zh-cn/react-navigation-elements.md
@@ -4,20 +4,24 @@
@react-navigation/elements
-
+
-
+
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements)
+本项目基于 [@react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) 开发。
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/elements`，具体版本所属关系如下：
-## 安装与使用
+| Version | Package Name | Repository | Release |Support RN version|
+| ------------------------- |----------------------------------------| ------------------ | -------------------------- |-------------------|
+| 1.3.21 | @react-native-oh-tpl/elements | [Github](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements) | [Github Releases](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements/releases) |0.72 |
+| 2.3.9 |@react-native-ohos/elements | [Github](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/br_rnoh0.77/packages/elements) | [GitCode Releases](https://gitcode.com/openharmony-sig/rntpc_react-navigation/releases) |0.77 |
-请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/elements Releases](https://github.com/react-native-oh-library/react-navigation/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+## 安装与使用
进入到工程目录并输入以下命令：
@@ -26,13 +30,21 @@
#### **npm**
```bash
+# 0.72
npm install @react-native-oh-tpl/elements
+
+# 0.77
+npm install @react-native-ohos/elements
```
#### **yarn**
```bash
+# 0.72
yarn add @react-native-oh-tpl/elements
+
+# 0.77
+yarn add @react-native-ohos/elements
```
@@ -82,7 +94,8 @@ export default NavigationElements;
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases?q=elements&expanded=true)
+1. RNOH: 0.72.27; SDK: HarmonyOS 5.1.1 Release SDK; IDE: DevEco Studio 5.1.1 Release; ROM: 5.0.1.120;
+2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
## 属性
@@ -93,49 +106,55 @@ export default NavigationElements;
以下属性已验证，更多使用详情请查看 [react-navigation/elements 的文档介绍](https://reactnavigation.org/docs/elements)
**Header Props**
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|--------------------------------|----------------------------------------------------------------------------------------------------------------------------|---------------------|----------|----------|-------------------|
-| headerTitle | String or a function that returns a React Element to be used by the header. | string | no | all | yes |
-| headerTitleAlign | How to align the header title | 'left'|'center' | no | all | yes |
-| headerTitleAllowFontScaling | Whether header title font should scale to respect Text Size accessibility settings. | boolean | no | all | yes |
-| headerLeft | Function which returns a React Element to display on the left side of the header. | function | no | all | yes |
-| headerRight | Function which returns a React Element to display on the right side of the header. | function | no | all | yes |
-| headerShadowVisible | Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header. | boolean | no | all | yes |
-| headerStyle | Style object for the header. You can specify a custom background color here | object | no | all | yes |
-| headerTitleStyle | Style object for the title component | object | no | all | yes |
-| headerLeftContainerStyle | Customize the style for the container of the headerLeft component, for example to add padding. | object | no | all | yes |
-| headerRightContainerStyle | Customize the style for the container of the headerRight component, for example to add padding. | object | no | all | yes |
-| headerTitleContainerStyle | Customize the style for the container of the headerTitle component, for example to add padding. | object | no | all | yes |
-| headerBackgroundContainerStyle | Style object for the container of the headerBackground element. | object | no | all | yes |
-| headerTintColor | Tint color for the header | string | no | all | yes |
-| headerPressColor | Color for material ripple (Android >= 5.0 only) | string | no | Android | no |
-| headerPressOpacity | Press opacity for the buttons in header (Android < 5.0, and iOS) | number | no | all | yes |
-| headerTransparent | Defaults to false. If true, the header will not have a background unless you explicitly provide it with headerBackground. | boolean | no | all | yes |
-| headerBackground | Function which returns a React Element to render as the background of the header. | function | no | all | yes |
-| headerStatusBarHeight | Extra padding to add at the top of header to account for translucent status bar. | number | no | all | yes |
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+|-----------------------------------------|------------------------------------------------------|---------------------|----------|----------|-------------------|
+| headerTitle | 字符串或返回要用作标题的 React 元素的函数 | string | no | all | yes |
+| headerTitleAlign | 如何对齐标题 | 'left'|'center' | no | all | yes |
+| headerTitleAllowFontScaling | 标题字体是否应缩放以遵循文本大小的无障碍设置 | boolean | no | all | yes |
+| headerLeft | 返回要在标题左侧显示的 React 元素的函数 | function | no | all | yes |
+| headerRight | 返回要在标题右侧显示的 React 元素的函数 | function | no | all | yes |
+| headerShadowVisible | 是否隐藏标题的高度阴影（安卓）或底部边框（iOS） | boolean | no | all | yes |
+| headerStyle | 标题的样式对象，可在此指定自定义背景颜色 | object | no | all | yes |
+| headerTitleStyle | 标题组件的样式对象 | object | no | all | yes |
+| headerLeftContainerStyle | 自定义标题左侧组件容器的样式，例如添加内边距 | object | no | all | yes |
+| headerRightContainerStyle | 自定义标题右侧组件容器的样式，例如添加内边距 | object | no | all | yes |
+| headerTitleContainerStyle | 自定义标题标题组件容器的样式，例如添加内边距 | object | no | all | yes |
+| headerBackgroundContainerStyle | 标题背景元素容器的样式对象 | object | no | all | yes |
+| headerTintColor | 标题的着色颜色 | string | no | all | yes |
+| headerPressColor | 材质涟漪效果的颜色（仅限安卓 5.0 及以上） | string | no | Android | no |
+| headerPressOpacity | 标题按钮的按下透明度（安卓 5.0 以下和 iOS） | number | no | all | yes |
+| headerTransparent | 默认为 false，若为 true，标题将没有背景，除非通过 headerBackground 显式提供 | boolean | no | all | yes |
+| headerBackground | 返回用作标题背景的 React 元素的函数 | function | no | all | yes |
+| headerStatusBarHeight | 为适配半透明状态栏在标题顶部添加的额外内边距 | number | no | all | yes |
+| headerSearchBarOptions2.3.8+ | 标题搜索栏的选项 | object | no | all | yes |
+| HeaderButton2.3.8+ | 用于在标题中显示按钮的组件 | function | no | all | yes |
+| Button2.3.8+ | 渲染按钮的组件 | function | no | all | yes |
+| Label2.3.8+ | 标签组件用于渲染小段文本 | function | no | all | yes |
**Header Components Props**
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-|--------------------|------------------------------------------------------------------------------------------------------------------------------|----------|----------|----------|-------------------|
-| HeaderBackground | A component containing the styles used in the background of the header, such as the background color and shadow. | function | no | all | yes |
-| HeaderTitle | A component used to show the title text in header. It's the default for headerTitle. It accepts the same props as a Text. | function | no | all | yes |
-| HeaderBackButton | A component used to show the back button header. It's the default for headerLeft in the stack navigator. | function | no | all | yes |
-| MissingIcon | A component that renders a missing icon symbol. It can be used as a fallback for icons to show that there's a missing icon. | function | no | all | yes |
-| PlatformPressable | A component which provides an abstraction on top of Pressable to handle platform differences. | function | no | all | yes |
-| ResourceSavingView | A component which aids in improving performance for inactive screens by utilizing removeClippedSubviews. | function | no | all | yes |
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+|--------------------|----------------------------------------------------|----------|----------|----------|-------------------|
+| HeaderBackground | 用于包含标题背景样式（如背景色和阴影）的组件 | function | no | all | yes |
+| HeaderTitle | 用于显示标题栏标题文本的组件，它是 headerTitle 的默认组件，接受与 Text 相同的属性 | function | no | all | yes |
+| HeaderBackButton | 用于显示标题栏返回按钮的组件，它是栈导航器中 headerLeft 的默认组件 | function | no | all | yes |
+| MissingIcon | 渲染缺失图标符号的组件，可作为图标缺失时的备用显示 | function | no | all | yes |
+| PlatformPressable | 在 Pressable 基础上提供平台差异处理抽象的组件 | function | no | all | yes |
+| ResourceSavingView | 通过利用 removeClippedSubviews 提升非活动屏幕性能的组件 | function | no | all | yes |
**Utilities**
+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
|------------------------|-------------------------------------------------------------------------------------------------------------------|----------|----------|----------|-------------------|
-| SafeAreaProviderCompat | A wrapper over the SafeAreaProvider component from `react-native-safe-area-context which includes initial values. | function | no | all | yes |
-| HeaderBackContext | React context that can be used to get the back title of the parent screen. | function | no | all | yes |
-| HeaderShownContext | React context that can be used to check if a header is visible in a parent screen. | function | no | all | yes |
-| HeaderHeightContext | React context that can be used to get the height of the nearest visible header in a parent screen. | function | no | all | yes |
-| useHeaderHeight | Hook that returns the height of the nearest visible header in the parent screen. | function | no | all | yes |
-| getDefaultHeaderHeight | Helper that returns the default header height. | function | no | all | yes |
-| getHeaderTitle | Helper that returns the title text to use in header. | function | no | all | yes |
+| SafeAreaProviderCompat | 对 react-native-safe-area-context 中 SafeAreaProvider 组件的封装，包含初始值 | function | no | all | yes |
+| HeaderBackContext | React 上下文，可用于获取父屏幕的返回标题 | function | no | all | yes |
+| HeaderShownContext | React 上下文，可用于检查父屏幕中标题栏是否可见 | function | no | all | yes |
+| HeaderHeightContext | React 上下文，可用于获取父屏幕中最邻近可见标题栏的高度 | function | no | all | yes |
+| useHeaderHeight | 钩子函数，返回父屏幕中最邻近可见标题栏的高度 | function | no | all | yes |
+| getDefaultHeaderHeight | 返回默认标题栏高度的辅助工具 | function | no | all | yes |
+| getHeaderTitle | 返回标题栏中使用的标题文本的辅助工具 | function | no | all | yes |
## 遗留问题
@@ -150,4 +169,4 @@ export default NavigationElements;
## 开源协议
-本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/elements/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/main/packages/elements/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file