diff --git a/en/react-native-localization-settings.md b/en/react-native-localization-settings.md index 0b1815dd8a7c70b9f380e71968e7b427d797df7f..fc052ede05a2748d5a4874a610ddd7743d0c6cad 100644 --- a/en/react-native-localization-settings.md +++ b/en/react-native-localization-settings.md @@ -17,7 +17,14 @@ ## Installation and Usage -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. +Please go to the corresponding Release release address of the third-party library to view the version information of the Release package: +|Third party library version | Release information | Support RN version| +| ---------- |--------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| 1.0.2-0.0.1 | [@react-native-oh-tpl/react-native-localization-settings]( https://github.com/react-native-oh-library/react-native-localization-settings/releases ) | 0.72 | +| 1.2.0 | [@react-native-ohos/react-native-localization-settings]() | 0.77 | + + +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. Go to the project directory and execute the following instruction: @@ -200,7 +207,11 @@ 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) +Please go to the corresponding Release release address of the third-party library to view the version information of the Release package: +|Third party library version | Release information | Support RN version| +| ---------- |--------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| 1.0.2-0.0.1 | [@react-native-oh-tpl/react-native-localization-settings]( https://github.com/react-native-oh-library/react-native-localization-settings/releases ) | 0.72 | +| 1.2.0 | [@react-native-ohos/react-native-localization-settings]() |0.77 | ## Static Methods diff --git a/en/react-native-system-setting.md b/en/react-native-system-setting.md index 73daaa46915a1ca53a678123b96be243823fcf70..acf6d5199b58764e537db0c409495523f2d92596 100644 --- a/en/react-native-system-setting.md +++ b/en/react-native-system-setting.md @@ -17,7 +17,13 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-library/react-native-system-setting Releases](https://github.com/react-native-oh-library/react-native-system-setting/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. +Please visit the Release release address of the third-party library to view the corresponding version information: +|Third party library version | Release information | Support RN version| +| ---------- |----------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| 1.7.6 | [@react-native-oh-tpl/react-native-system-setting Releases]( https://github.com/react-native-oh-library/react-native-system-setting/releases ) | 0.72 | +| 1.7.6 | [@react-native-ohos/react-native-system-setting Releases]() | 0.77 | + +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. Go to the project directory and execute the following instruction: diff --git a/en/react-navigation-bottom-tabs.md b/en/react-navigation-bottom-tabs.md index 0bd694ab5307db8773fbb56a288a08b7858264de..5acd8cea4f9cd622c0be26c4486e2b0decc3f534 100644 --- a/en/react-navigation-bottom-tabs.md +++ b/en/react-navigation-bottom-tabs.md @@ -4,10 +4,10 @@

@react-navigation/bottom-tabs

- + Supported platforms - + License

@@ -16,6 +16,11 @@ ## Installation and Usage +|Third party library version | Supports RN version| +| ---------- | ---------- | +| 6.5.20 | 0.72 | +| 7.3.10 | 0.77 | + Go to the project directory and execute the following instruction: @@ -24,13 +29,20 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# V 6.5.20 npm install @react-navigation/bottom-tabs@6.5.20 + +# V7.3.10 +npm install @react-navigation/bottom-tabs@7.3.10 ``` #### **yarn** ```bash yarn add @react-navigation/bottom-tabs@6.5.20 + +# V7.3.10 +yarn add @react-navigation/bottom-tabs@7.3.10 ``` @@ -96,6 +108,7 @@ This document is verified based on the following versions: 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; +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 +121,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 +151,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 +176,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..39e6bbf75d07d068e29d4297bfa88039a0c3fc50 100644 --- a/en/react-navigation-elements.md +++ b/en/react-navigation-elements.md @@ -4,10 +4,10 @@

@react-navigation/elements

- + Supported platforms - + License

@@ -17,7 +17,14 @@ ## 安装与使用 -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. +Please visit the Release release address of the third-party library to view the corresponding version information: +|Third party library version | Release information | Support RN version| +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.3.21 | [@react-native-oh-tpl/elements Releases]( https://github.com/react-native-oh-library/react-navigation/releases ) | 0.72 | +| 2.3.8 | [@react-native-ohos/elements Releases]() | 0.77 | + + +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. 进入到工程目录并输入以下命令： @@ -27,13 +34,20 @@ Find the matching version information in the release address of a third-party li #### **npm** ```bash +# V1.3.21 npm install @react-native-oh-tpl/elements + +# V2.3.8 +npm install @react-native-ohos/elements ``` #### **yarn** ```bash yarn add @react-native-oh-tpl/elements + +# V2.3.8 +yarn add @react-native-ohos/elements ``` @@ -83,7 +97,11 @@ 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) +Please visit the Release release address of the third-party library to view the corresponding version information: +|Third party library version | Release information | Support RN version| +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.3.21 | [@react-native-oh-tpl/elements Releases]( https://github.com/react-native-oh-library/react-navigation/releases ) | 0.72 | +| 2.3.8 | [@react-native-ohos/elements Releases]() | 0.77 | ## 属性 @@ -114,7 +132,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-email-link.md b/zh-cn/react-native-email-link.md index cde72b08576f287ff2f624f4a334094c16e9828d..f69e232282018ae242fcb117191eb2deafc01169 100644 --- a/zh-cn/react-native-email-link.md +++ b/zh-cn/react-native-email-link.md @@ -18,8 +18,6 @@ 请到三方库的 Releases 发布地址查看配套的版本信息： -请到三方库的 Releases 发布地址查看配套的版本信息： - | 三方库版本 | 发布信息 | 支持RN版本 | | ---------- | ------------------------------------------------------------ | ---------- | | 1.15.0 | [@react-native-oh-tpl/react-native-email-link Releases](https://github.com/react-native-oh-library/react-native-email-link/releases) | 0.72 | @@ -335,37 +333,38 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | -| `openInbox` | Directly open the inbox of the default mail client on your device. | function | No | All | yes | -| `openComposer` | Used to open a new email authoring interface that allows users to create emails directly from the app. | function | No | All | yes | -| `getEmailClients` | Get a list of all supported mail client applications installed on the device. | function | No | All | yes | +| `openInbox` | 直接打开设备上默认邮件客户端的收件箱 | function | No | All | yes | +| `openComposer` | 用于打开一个新的电子邮件创作界面，允许用户直接从应用程序创建电子邮件 | function | No | All | yes | +| `getEmailClients` | 获取设备上安装的所有受支持的邮件客户端应用程序的列表。 | function | No | All | yes | **openInbox 方法参数** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- | -| `title` | Text for the top of the ActionSheet or Intent | string | no | All | no | -| `message` | Subtext under the title on the ActionSheet | string | no | iOS | no | -| `cancelLabel` | Text for last button of the ActionSheet | string | no | iOS | no | -| `removeText` | If true, not text will be show above the ActionSheet or Intent. Default value is false | boolean | no | All | no | -| `defaultEmailLabel` | Text for first button of the ActionSheet | function | no | iOS | no | -| `newTask` | If true, the email Intent will be started in a new Android task. Else, the Intent will be launched in the current task | boolean | no | Android | no | +| `title` | 操作表或意图顶部的文本 | string | no | All | no | +| `message` | 行动表标题下的子文本 | string | no | iOS | no | +| `cancelLabel` | 操作表最后一个按钮的文本| string | no | iOS | no | +| `removeText` | 如果为真，则不会在操作表或意图上方显示文本。默认值为false | boolean | no | All | no | +| `defaultEmailLabel` | 操作表第一个按钮的文本 | function | no | iOS | no | +| `newTask` | 如果为真，电子邮件Intent将在新的Android任务中启动。否则，Intent将在当前任务中启动 | boolean | no | Android | no | **openComposer 方法参数** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- | -| `app` | App to open the composer with| string | no | All | yes | -| `title` | Text for the top of the ActionSheet or Intent | string | no | All | no | -| `message` | Subtext under the title on the ActionSheet | string | no | iOS | no | -| `cancelLabel` | Text for last button of the ActionSheet | string | no | iOS | no | -| `removeText` | If true, not text will be show above the ActionSheet or Intent. Default value is false | boolean | no | All | no | -| `defaultEmailLabel` | Text for first button of the ActionSheet | function | no | iOS | no | -| `to` | Recipient's email address | string | no | All | yes | -| `cc` | Email's cc | string | no | All | yes | -| `bcc` | Email's bcc | string | no | All | yes | -| `subject` | Email's subject | string | no | All | yes | -| `body` | Email's body | string | no | All | yes | -| `encodeBody` | Apply encodeURIComponent to the email's body | boolean | no | All | yes | +| `app` | 打开的应用程序| string | no | All | yes | +| `title` | 操作表或意图顶部的文本 | string | no | All | no | +| `message` | 行动表标题下的子文本 | string | no | iOS | no | +| `cancelLabel` | 操作表最后一个按钮的文本 | string | no | iOS | no | +| `removeText` | 如果为真，则不会在操作表或意图上方显示文本。默认值为false | boolean | no | All | no | +| `defaultEmailLabel` | 操作表第一个按钮的文本 | function | no | iOS | no | +| `to` | 收件人的电子邮件地址 | string | no | All | yes | +| `cc` | 电子邮件抄送 | string | no | All | yes | +| `bcc` | 电子邮件密送 | string | no | All | yes | +| `subject` | 电子邮件主题| string | no | All | yes | +| `body` | 电子邮件正文 | string | no | All | yes | +| `encodeBody` | 将encodeURIComponent应用于电子邮件正文 | boolean | no | All | yes | ## 遗留问题 diff --git a/zh-cn/react-native-localization-settings.md b/zh-cn/react-native-localization-settings.md index 2935eb390744f84e56ba97bc9650688f14c544f9..4750c09b63792f39704ec14d6db47b94abe0b78b 100644 --- a/zh-cn/react-native-localization-settings.md +++ b/zh-cn/react-native-localization-settings.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 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包。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- |--------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| 1.0.2-0.0.1 | [@react-native-oh-tpl/react-native-localization-settings](https://github.com/react-native-oh-library/react-native-localization-settings/releases) | 0.72 | +| 1.2.0 | [@react-native-ohos/react-native-localization-settings]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -204,7 +211,12 @@ 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) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- |--------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| 1.0.2-0.0.1 | [@react-native-oh-tpl/react-native-localization-settings](https://github.com/react-native-oh-library/react-native-localization-settings/releases) | 0.72 | +| 1.2.0 | [@react-native-ohos/react-native-localization-settings]() | 0.77 | ## 静态方法 diff --git a/zh-cn/react-native-system-setting.md b/zh-cn/react-native-system-setting.md index ca09561dae920c9c0678108831686048e96ea2a9..e4627185084375bd4c60e27477ab75bab9e027bd 100644 --- a/zh-cn/react-native-system-setting.md +++ b/zh-cn/react-native-system-setting.md @@ -22,10 +22,10 @@ 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.7.6 | [@react-native-oh-library/react-native-system-setting Releases](https://github.com/react-native-oh-library/react-native-system-setting/releases) | 0.72 | -| 1.7.6 | [@react-native-oh-library/react-native-system-setting Releases]() | 0.77 | +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- |----------------------------------------------------------------------------------------------------------------------------------------------| ---------- | +| 1.7.6 | [@react-native-oh-tpl/react-native-system-setting Releases](https://github.com/react-native-oh-library/react-native-system-setting/releases) | 0.72 | +| 1.7.6 | [@react-native-ohos/react-native-system-setting Releases]() | 0.77 | 对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 @@ -358,41 +358,41 @@ ohpm install 详情请见[react-native-system-setting](https://github.com/c19354837/react-native-system-setting/tree/master) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------------------- | ------------------------------------------------------------ | ------------------------ | -------- | ----------- | ----------------- | -| getVolume | Get the system volume. | (type:string) => Promise | No | iOS/Android | yes | -| setVolume | Set the system volume by specified value, from 0 to 1. 0 for mute, and 1 is max volume. | (val:float, config:object) => void | No | iOS/Android | no | -| addVolumeListener | Listen the volume changing, and it will return the listener. | callback | No | iOS/Android | yes | -| removeVolumeListener | Remove listener when it no longer needed. | listener | No | iOS/Android | no | -| getBrightness | Get the system brightness. | () => Promise | No | iOS/Android | no | -| setBrightness | Set the system brightness by specified value, from 0 to 1. 0 for brightless, and 1 is max. | (val:float) => Promise | No | iOS/Android | no | -| setBrightnessForce | In Android, if the screen mode is auto, SystemSetting.setBrightness() will not work. You can call this to change the screen mode to MANUAL first. | (val:float) => Promise | No | Android | no | -| setAppBrightness | For Android and Harmony, `setBrightness()` or `setBrightnessForce()` will change the system's brightness, while this just changes the app's brightness, and it has no permission trouble. | (val:float) => boolean | No | Android | yes | -| getAppBrightness | Get the app brightness, and it will returns system brightness if you haven't call `setAppBrightness(val)` yet. (iOS allways returns system brightness) | () => Promise | No | Android | yes | -| getScreenMode | (Only for Android, iOS and Harmony will return -1). Get the screen mode, 0 is manual, while 1 is automatic. | () => Promise | No | Android | no | -| setScreenMode | (Only for Android, iOS and Harmony cannot change it). Change the screen mode, 0 is manual, while 1 is automatic. | (mode:int) => Promise | No | Android | no | -| grantWriteSettingPermission | open app setting page. It's user-friendly when you need some permission. Normally, you can call it if `setScreenMode()`, `setBrightness()` or `setBrightnessForce()` return false | callback | No | iOS/Android | no | -| saveBrightness | It will save current brightness and screen mode. | callback | No | iOS/Android | yes | -| restoreBrightness | Restore brightness and screen mode back to saveBrightness(). While iOS only restore the brightness, Android will restore both, Harmony will restore the app's rightness. | () => Promise | No | iOS/Android | yes | -| isWifiEnabled | Get wifi state, true if wifi is on. | () => Promise | No | iOS/Android | yes | -| switchWifi | It will open **Wifi Setting Page**, and you can change it by yourself. When come back to the app, the `complete` will be call. | (complete) => void | No | iOS/Android | yes | -| switchWifiSilence | It will open wifi if the wifi is off, and close wifi when the wifi is on now. When it has done, the `complete` will be call. | (complete) => void | No | Android | no | -| addWifiListener | Listen the wifi state changing, and it will return the listener. (Android only) | (callback) => Promise | No | Android | no | -| isLocationEnabled | Get location state, true if location is on. | () => Promise | No | iOS/Android | yes | -| switchLocation | It will open **System Location Setting Page**, and you can change it by yourself. When come back to the app, the `complete` will be call. | (complete) => void | No | iOS/Android | yes | -| addLocationListener | Listen the location state changing, and it will return the listener. (Android only) | (callback) => Promise | No | Android | no | -| getLocationMode | Get current location mode code: `0` - 'off', `1` - 'gps', `2` - 'network', `3` - 'gps & network'. (Android only) | () => Promise | No | Android | no | -| addLocationModeListener | Listen the location mode changing, and it will return the listener. (Android only) | (callback) => Promise | No | Android | no | -| isBluetoothEnabled | Get bluetooth state, true if bluetooth is on. | () => Promise | No | iOS/Android | yes | -| switchBluetooth | It will open **System Bluetooth Setting Page**, and you can change it by yourself. When come back to the app, the `complete` will be call. | (complete) => void | No | iOS/Android | yes | -| switchBluetoothSilence | It will open bluetooth if the bluetooth is off, and close bluetooth when the bluetooth is on now. When it has done, the `complete` will be call. In android, it's done programmatically. | (complete) => void | No | Android | yes | -| addBluetoothListener | Listen the bluetooth state changing, and it will return the listener. | (callback) => Promise | No | iOS/Android | yes | -| isAirplaneEnabled | Get airplane state, true if airplane is on. | () => Promise | No | iOS/Android | no | -| switchAirplane | It will open **System Setting Page**, and you can change it by yourself. | (complete) => void | No | iOS/Android | yes | -| addAirplaneListener | Listen the airplane state changing, and it will return the listener. (Android only) | (callback) => Promise | No | Android | no | -| setAppStore | `true` means that you'll submit your app to App Store,`false` means that your app will not upload to App Store, and you can use any APIs at will. | (isAppStore:bool) => void| No | iOS | no | -| removeListener | you can use this to remove the listener which return by `add*Listener(callback)` | (listener) => void | No | iOS/Android | yes | -| openAppSystemSettings | open app's setting page | callback | No | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------- |-------------------------------------------------------------------------------------------------------------| ------------------------ | -------- | ----------- | ----------------- | +| getVolume | 获取系统音量 。 | (type:string) => Promise | No | iOS/Android | yes | +| setVolume | 按指定值设置系统卷，从0到1。0表示静音，1表示最大音量 。 | (val:float, config:object) => void | No | iOS/Android | no | +| addVolumeListener | 监听音量变化，它会返回给监听者 。 | callback | No | iOS/Android | yes | +| removeVolumeListener | 不再需要时移除监听器 。 | listener | No | iOS/Android | no | +| getBrightness | 获取系统亮度 。 | () => Promise | No | iOS/Android | no | +| setBrightness | 按指定值设置系统亮度，从0到1。0表示无光，1表示最大值 。 | (val:float) => Promise | No | iOS/Android | no | +| setBrightnessForce | 在安卓系统中，若屏幕模式处于自动状态，SystemSetting.setBrightness() 将不会生效。你可以先调用此方法将屏幕模式切换为手动模式 。 | (val:float) => Promise | No | Android | no | +| setAppBrightness | 对于安卓和鸿蒙系统，`setBrightness()` 或 `setBrightnessForce()` 会改变系统亮度，而这里的方法仅改变应用亮度，且无需权限申请 。 | (val:float) => boolean | No | Android | yes | +| getAppBrightness | 获取应用亮度，若未调用过 `setAppBrightness(val)` 则返回系统亮度（iOS始终返回系统亮度 。 | () => Promise | No | Android | yes | +| getScreenMode | 仅限安卓，iOS和鸿蒙返回-1）获取屏幕模式，0代表手动模式，1代表自动模式 。 | () => Promise | No | Android | no | +| setScreenMode | （仅限安卓，iOS和鸿蒙无法修改）切换屏幕模式，0代表手动模式，1代表自动模式 。 | (mode:int) => Promise | No | Android | no | +| grantWriteSettingPermission | 打开应用设置页面。当需要某些权限时，这个操作很人性化。通常当 `setScreenMode()`, `setBrightness()` 或 `setBrightnessForce()` 返回false时可以调用 。 | callback | No | iOS/Android | no | +| saveBrightness | 保存当前亮度和屏幕模式 。 | callback | No | iOS/Android | yes | +| restoreBrightness | 将亮度和屏幕模式恢复至 saveBrightness() 保存的状态。iOS仅恢复亮度，安卓两者都恢复，鸿蒙恢复应用亮度 。 | () => Promise | No | iOS/Android | yes | +| isWifiEnabled | 获取WiFi状态，开启返回true 。 | () => Promise | No | iOS/Android | yes | +| switchWifi | 打开WiFi设置页面，用户可自行修改。返回应用时会调用 `complete` 回调 。 | (complete) => void | No | iOS/Android | yes | +| switchWifiSilence | 切换WiFi状态（开启时关闭，关闭时开启）。操作完成后会调用 `complete` 回调 。 | (complete) => void | No | Android | no | +| addWifiListener | 监听WiFi状态变化，返回监听器（仅安卓）。 | (callback) => Promise | No | Android | no | +| isLocationEnabled | 获取定位服务状态，开启返回true 。 | () => Promise | No | iOS/Android | yes | +| switchLocation | 打开系统定位设置页面，用户可自行修改。返回应用时会调用 `complete` 回调 。 | (complete) => void | No | iOS/Android | yes | +| addLocationListener | 监听定位状态变化，返回监听器（仅安卓）。 | (callback) => Promise | No | Android | no | +| getLocationMode | 获取当前定位模式代码：`0`-关闭 `1`-GPS `2`-网络 `3`-GPS和网络（仅安卓）。 | () => Promise | No | Android | no | +| addLocationModeListener | 监听定位模式变化，返回监听器（仅安卓）。 | (callback) => Promise | No | Android | no | +| isBluetoothEnabled | 获取蓝牙状态，开启返回true 。 | () => Promise | No | iOS/Android | yes | +| switchBluetooth | 打开系统蓝牙设置页面，用户可自行修改。返回应用时会调用 `complete` 回调 。 | (complete) => void | No | iOS/Android | yes | +| switchBluetoothSilence | I切换蓝牙状态（开启时关闭，关闭时开启）。操作完成后会调用 `complete` 回调。在安卓中，此操作通过编程方式完成 。 | (complete) => void | No | Android | yes | +| addBluetoothListener | 监听蓝牙状态变化，返回监听器 。 | (callback) => Promise | No | iOS/Android | yes | +| isAirplaneEnabled | 获取飞行模式状态，开启返回true 。 | () => Promise | No | iOS/Android | no | +| switchAirplane | 打开系统设置页面，用户可自行修改 。 | (complete) => void | No | iOS/Android | yes | +| addAirplaneListener | 监听飞行模式状态变化，返回监听器（仅安卓）。 | (callback) => Promise | No | Android | no | +| setAppStore | `true` 表示应用将提交到App Store，`false` 表示应用不会上架，可以随意使用任何API 。 | (isAppStore:bool) => void| No | iOS | no | +| removeListener | 可使用此方法移除由 `add*Listener(callback)` 返回的监听器 。 | (listener) => void | No | iOS/Android | yes | +| openAppSystemSettings | 打开应用设置页面 。 | callback | No | iOS/Android | yes | ## 其他 diff --git a/zh-cn/react-navigation-bottom-tabs.md b/zh-cn/react-navigation-bottom-tabs.md index 32c9511fcba6888b3d7b779067ab367fd97e2736..e040d1d63b927306e35886b08e9c924eeedd01bf 100644 --- a/zh-cn/react-navigation-bottom-tabs.md +++ b/zh-cn/react-navigation-bottom-tabs.md @@ -4,10 +4,10 @@

@react-navigation/bottom-tabs

- + Supported platforms - + License

@@ -16,21 +16,33 @@ ## 安装与使用 -进入到工程目录并输入以下命令： +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 6.5.20 | 0.72 | +| 7.3.10 | 0.77 | +进入到工程目录并输入以下命令： #### **npm** ```bash +# V 6.5.20 npm install @react-navigation/bottom-tabs@6.5.20 + +# V7.3.10 +npm install @react-navigation/bottom-tabs@7.3.10 ``` #### **yarn** ```bash +# V 6.5.20 yarn add @react-navigation/bottom-tabs@6.5.20 + +# V7.3.10 +yarn add @react-navigation/bottom-tabs@7.3.10 ``` @@ -97,6 +109,7 @@ export function NavigationBottomTabs() { 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; +5. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 属性 @@ -109,26 +122,29 @@ export function NavigationBottomTabs() { **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 | @@ -136,19 +152,24 @@ export function NavigationBottomTabs() { | 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 | @@ -156,10 +177,16 @@ export function NavigationBottomTabs() { | 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 | + + ## 遗留问题 ## 其他 ## 开源协议 -本项目基于 [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..aa4e718ef7a9e1a6db7691cbe5c1fba1a31197aa 100644 --- a/zh-cn/react-navigation-elements.md +++ b/zh-cn/react-navigation-elements.md @@ -4,20 +4,26 @@

@react-navigation/elements

- + Supported platforms - + License

> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/elements) - ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/elements Releases](https://github.com/react-native-oh-library/react-navigation/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.3.21 | [@react-native-oh-tpl/elements Releases](https://github.com/react-native-oh-library/react-navigation/releases) | 0.72 | +| 2.3.8 | [@react-native-ohos/elements Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +32,21 @@ #### **npm** ```bash +# V1.3.21 npm install @react-native-oh-tpl/elements + +# V2.3.8 +npm install @react-native-ohos/elements ``` #### **yarn** ```bash +# V1.3.21 yarn add @react-native-oh-tpl/elements + +# V2.3.8 +yarn add @react-native-ohos/elements ``` @@ -82,7 +96,12 @@ 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) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.3.21 | [@react-native-oh-tpl/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases?q=elements&expanded=true) | 0.72 | +| 2.3.8 | [@react-native-ohos/react-navigation Releases](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/master/packages/elements) | 0.77 | ## 属性 @@ -95,7 +114,7 @@ export default NavigationElements; **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 | +| 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 | @@ -103,16 +122,20 @@ export default NavigationElements; | 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 | +| 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 | +| 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** @@ -120,22 +143,22 @@ export default NavigationElements; | 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 | +| 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 | **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 | +| 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 | +| getHeaderTitle | Helper that returns the title text to use in header. | function | no | all | yes | ## 遗留问题 @@ -150,4 +173,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