From 84166b074e1d62bff2060bb5153cf71a003a10c1 Mon Sep 17 00:00:00 2001 From: yhhelios Date: Tue, 2 Dec 2025 21:03:54 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0react-navigation-nati?= =?UTF-8?q?ve-stack=E7=9A=84=E4=B8=AD=E8=8B=B1=E6=96=87=E6=8C=87=E5=AF=BC?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-navigation-native-stack.md | 92 +++++++++----- zh-cn/react-navigation-native-stack.md | 163 +++++++++++++++---------- 2 files changed, 163 insertions(+), 92 deletions(-) diff --git a/en/react-navigation-native-stack.md b/en/react-navigation-native-stack.md index 16081c95..847a9b63 100644 --- a/en/react-navigation-native-stack.md +++ b/en/react-navigation-native-stack.md @@ -1,45 +1,57 @@ -> 模板版本：v0.2.2 +> Template version: v0.2.2

@react-navigation/native-stack

- + Supported platforms - + License

> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/native-stack) -## 安装与使用 +The repository for this third-party library has been migrated to Gitcode, and it now supports direct download from npm. The new package name is: `@react-native-ohos/native-stack`. The specific version relationships are as follows: -> [!TIP] native-stack的tgz包在react-navigation Releases。 +| Version | Package Name | Repository | Release | Version for RN | +| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 6.9.26 | @react-native-oh-tpl/native-stack | [Github](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/native-stack) | [Github Releases](https://github.com/react-native-oh-library/react-navigation/releases) | 0.72 | +| 7.3.11 | @react-native-ohos/native-stack | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/br_rnoh0.77/packages/native-stack) | [GitCode Releases]() | 0.77 | -Find the matching version information in the release address of a third-party library：[@react-native-oh-library/react-navigation 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. +For older versions that have not been released to npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package -进入到工程目录并输入以下命令： +## Installation and Usage +Go to the project directory and execute the following instruction: ### **npm** ```bash +# for RN0.72 npm install @react-native-oh-tpl/native-stack + +# for RN0.77 +npm install @react-native-ohos/native-stack ``` ### **yarn** ```bash +# for RN0.72 yarn install @react-native-oh-tpl/native-stack + +# for RN0.77 +yarn install @react-native-ohos/native-stack ``` -下面的代码展示了这个库的基本使用场景： +The following code demonstrates the basic usage scenarios of this library: ```tsx import * as React from 'react'; @@ -123,31 +135,34 @@ export default function App() { ## Link -本库依赖以下三方库，请查看对应文档： +This library relies on the following third-party libraries, please refer to the corresponding documentation: + [react-native-screens](/zh-cn/react-native-screens.md) -+ [@react-navigation/native](/zh-cn/react-navigation-native.md) -+ [@react-navigation/elements](/zh-cn/react-navigation-elements.md) -+ [@react-native-oh-library/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md) ++ [native](/zh-cn/react-navigation-native.md) ++ [elements](/zh-cn/react-navigation-elements.md) ++ [react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md) -本库 HarmonyOS 侧实现依赖@react-native-oh-library/react-native-safe-area-context 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +The HarmonyOS implementation of this library relies on the native code of react-native-safe-area-context. If the library has already been introduced in the HarmonyOS project, there is no need to introduce it again. You can skip the steps in this chapter and use it directly. -如未引入请参照[@react-native-oh-library/react-native-safe-area-context 文档的 Link 章节](/zh-cn/react-native-safe-area-context.md#link)进行引入 +If not introduced, please refer to [Link chapter of document react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md#link)for introduction -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 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-library/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases) +Verified in the following version: -## 属性 +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +2. RNOH：0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +## Properties -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -以下属性已验证，更多属性详情请查看 [react-navigation/native-stack 的文档介绍](https://reactnavigation.org/docs/native-stack-navigator) +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. + +The following attributes have been verified. For more details on the attributes, please refer to [document react-navigation/native-stack](https://reactnavigation.org/docs/native-stack-navigator) **Props** | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -155,7 +170,9 @@ export default function App() { | 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 | - +| layout7.3.10+ | A layout is a wrapper around the navigator. It can be useful for augmenting the navigators with additional UI with a wrapper.The difference from adding a wrapper around the navigator manually is that the code in a layout callback has access to the navigator's state, options etc. | object | no | all | yes | +| screenLayout7.3.10+ | A screen layout is a wrapper around each screen in the navigator. It makes it easier to provide things such as an error boundary and suspense fallback for all screens in the navigator, or wrap each screen with additional UI. | object | no | all | yes | +| screenListeners7.3.10+ | You can pass a prop named `screenListeners` to the navigator component, where you can specify listeners for events from all screens for this navigator. | object | no | all | yes | **Options & screenOptions** | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -190,7 +207,7 @@ export default function App() { | statusBarColor | Sets the status bar color (similar to the StatusBar component). Defaults to initial status bar color. | string | no | Android | no | | statusBarTranslucent | Sets the translucency of the status bar (similar to the StatusBar component). Defaults to false. | boolean | no | Android | no | | contentStyle | Style object for the scene content. | object | no | all | yes | -| customAnimationOnGesture | Whether the gesture to dismiss should use animation provided to animation prop. Defaults to false. | boolean | no | iOS | no | +| customAnimationOnGesturedeprecated from 7.3.10 > | Whether the gesture to dismiss should use animation provided to animation prop. Defaults to false. | boolean | no | iOS | no | | fullScreenGestureEnabled | Whether the gesture to dismiss should work on the whole screen. Using gesture to dismiss with this option results in the same transition animation as simple_push. This behavior can be changed by setting customAnimationOnGesture prop. Achieving the default iOS animation isn't possible due to platform limitations. Defaults to false. | boolean | no | iOS | no | | gestureEnabled | Whether you can use gestures to dismiss this screen. Defaults to true. | boolean | no | iOS | no | | animationTypeForReplace | The type of animation to use when this screen replaces another screen. Defaults to pop. | 'push'|'pop' | no | Android，iOS | no | @@ -203,19 +220,36 @@ export default function App() { | navigationBarColor | Sets the navigation bar color. Defaults to initial status bar color. | string | no | Android | no | | navigationBarHidden | Boolean indicating whether the navigation bar should be hidden. Defaults to false. | boolean | no | Android | no | | 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 | +| headerBackButtonDisplayMode7.3.10+ | How the back button displays icon and title. | 'default' \| 'generic' \| 'minimal ' | no | iOS | yes | +| animationMatchesGesture7.3.10+ | Whether the gesture to dismiss should use animation provided to animation prop. Defaults to false. Doesn't affect the behavior of screens presented modally. | boolean | no | iOS | no | +| sheetElevation7.3.10+ | Works only when presentation is set to formSheet.
Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet. | number | no | Android | no | +| sheetExpandsWhenScrolledToEdge7.3.10+ | Works only when presentation is set to formSheet.
Whether the sheet should expand to larger detent when scrolling. | boolean | no | iOS | no | +| sheetCornerRadius7.3.10+ | Works only when presentation is set to formSheet.
The corner radius that the sheet will try to render with. | number | no | Android,iOS | no | +| sheetInitialDetentIndex7.3.10+ | Works only when presentation is set to formSheet.
Index of the detent the sheet should expand to after being opened. | number | no | Android,iOS | no | +| sheetGrabberVisible7.3.10+ | Works only when presentation is set to formSheet.
Boolean indicating whether the sheet shows a grabber at the top. | boolean | no | iOS | no | +| sheetLargestUndimmedDetentIndex7.3.10+ | Works only when presentation is set to formSheet.
The largest sheet detent for which a view underneath won't be dimmed. | 'none' \| 'last' | no | Android,iOS | no | **Events** + | Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------------|----------------------------------------------------------------------------------|----------|----------|----------|-------------------| | transitionStart | This event is fired when the transition animation starts for the current screen. | function | no | all | no | | transitionEnd | This event is fired when the transition animation ends for the current screen. | function | no | all | no | -## 遗留问题 +**Hooks7.3.10+** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| useAnimatedHeaderHeight | The hook returns an animated value representing the height of the header. | function | no | all | yes | + +## Known Issues -- [ ] react-native-screens功能缺失，导致headerSearchBarOptions等属性功能无法实现：[issue#25](https://github.com/react-native-oh-library/react-navigation/issues/25) +- [ ] Function react-native-screens is missing, resulting in the inability to implement attribute functions such as headerSearchBarOptions：[issue#25](https://github.com/react-native-oh-library/react-navigation/issues/25) +- [ ] V7.3.10 Hongmeng side did not implement formSheet, resulting in the formSheet of the presentation not being Hongmeng standardized：[issue#2](https://gitcode.com/openharmony-sig/rntpc_react-navigation/issues/2) +- [ ] V7.3.10 AnimationMatchesGesture did not implement Harmonyization due to dependency on third-party library react-native-screen: [issue#3](https://gitcode.com/openharmony-sig/rntpc_react-navigation/issues/3) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/main/packages/native-stack/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/main/packages/native-stack/LICENSE). \ No newline at end of file diff --git a/zh-cn/react-navigation-native-stack.md b/zh-cn/react-navigation-native-stack.md index dabf72a3..5928ecef 100644 --- a/zh-cn/react-navigation-native-stack.md +++ b/zh-cn/react-navigation-native-stack.md @@ -4,20 +4,26 @@

@react-navigation/native-stack

- + Supported platforms - + License

> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/native-stack) -## 安装与使用 +该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/native-stack`，具体版本所属关系如下： + +| Version | Package Name | Repository | Release | Version for RN | +| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | +| 6.9.26 | @react-native-oh-tpl/native-stack | [Github](https://github.com/react-native-oh-library/react-navigation/tree/sig/packages/native-stack) | [Github Releases](https://github.com/react-native-oh-library/react-navigation/releases) | 0.72 | +| 7.3.11 | @react-native-ohos/native-stack | [GitCode](https://gitcode.com/openharmony-sig/rntpc_react-navigation/tree/br_rnoh0.77/packages/native-stack) | [GitCode Releases]() | 0.77 | +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令： @@ -26,13 +32,21 @@ ### **npm** ```bash +# for RN0.72 npm install @react-native-oh-tpl/native-stack + +# for RN0.77 +npm install @react-native-ohos/native-stack ``` ### **yarn** ```bash +# for RN0.72 yarn install @react-native-oh-tpl/native-stack + +# for RN0.77 +yarn install @react-native-ohos/native-stack ``` @@ -123,13 +137,13 @@ export default function App() { 本库依赖以下三方库，请查看对应文档： + [react-native-screens](/zh-cn/react-native-screens.md) -+ [@react-navigation/native](/zh-cn/react-navigation-native.md) -+ [@react-navigation/elements](/zh-cn/react-navigation-elements.md) -+ [@react-native-oh-library/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md) ++ [native](/zh-cn/react-navigation-native.md) ++ [elements](/zh-cn/react-navigation-elements.md) ++ [react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md) -本库 HarmonyOS 侧实现依赖@react-native-oh-library/react-native-safe-area-context 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库 HarmonyOS 侧实现依赖react-native-safe-area-context 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-library/react-native-safe-area-context 文档的 Link 章节](/zh-cn/react-native-safe-area-context.md#link)进行引入 +如未引入请参照[react-native-safe-area-context 文档的 Link 章节](/zh-cn/react-native-safe-area-context.md#link)进行引入 ## 约束与限制 @@ -137,7 +151,10 @@ export default function App() { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases) +在下述版本验证通过： + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +2. RNOH：0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -148,69 +165,89 @@ export default function App() { 以下属性已验证，更多属性详情请查看 [react-navigation/native-stack 的文档介绍](https://reactnavigation.org/docs/native-stack-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 | - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------- | ------------------------------------------------------------ | ------ | -------- | -------- | ----------------- | +| id | 为导航器设置一个可选的唯一标识符。该 ID 可用于在子导航器中通过 navigation.getParent 方法引用此导航器 | string | no | all | yes | +| initialRouteName | 指定导航器首次加载时要渲染的初始路由名称. | string | no | all | yes | +| screenOptions | 为此导航器中所有屏幕配置默认的选项对象，用于统一设置屏幕的呈现方式. | object | no | all | yes | +| layout7.3.10+ | 布局是一个包裹导航器的包装器。它可以通过包装器为导航器增强额外的用户界面。与手动在导航器外部添加包装器不同，布局回调中的代码可以访问导航器的状态、配置选项等信息。 | object | no | all | yes | +| screenLayout7.3.10+ | 屏幕布局是导航器中每个屏幕的包装器。它可以更便捷地为导航器中的所有屏幕提供错误边界和 Suspense 回退内容，或者为每个屏幕包裹额外的用户界面。 | object | no | all | yes | +| screenListeners7.3.10+ | 你可以向导航器组件传递一个名为 screenListeners 的属性，在此处可以为此导航器中所有屏幕的事件指定监听器。 | object | no | all | yes | **Options & screenOptions** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|----------|-------------|-------------------| -| title | String that can be used as a fallback for headerTitle. | string | no | all | yes | -| headerBackButtonMenuEnabled | Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. Defaults to true. | boolean | no | iOS | no | -| headerBackVisible | Whether the back button is visible in the header. You can use it to show a back button alongside headerLeft if you have specified it. | boolean | no | Android,iOS | no | -| headerBackTitle | Title string used by the back button on iOS. Defaults to the previous scene's title, or "Back" if there's not enough space. Use headerBackTitleVisible: false to hide it. | string | no | iOS | no | -| headerBackTitleStyle | Style object for header back title.  | object | no | iOS | no | -| headerBackImageSource | Image to display in the header as the icon in the back button. | string | no | all | yes | -| headerLargeStyle | Style of the header when a large title is shown.  | object | no | iOS | no | -| headerLargeTitle | Whether to enable header with large title which collapses to regular header on scroll. | string | no | iOS | no | -| headerLargeTitleShadowVisible | Whether drop shadow of header is visible when a large title is shown. | boolean | no | iOS | no | -| headerLargeTitleStyle | Style object for large title in header. | object | no | iOS | no | -| headerShown | Whether to show the header. The header is shown by default. Setting this to false hides the header. | boolean | no | all | yes | -| headerStyle | Style object for header. | object | no | all | yes | -| headerShadowVisible | Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header. | object | no | Android，iOS | yes | -| headerTransparent | Boolean indicating whether the navigation bar is translucent. | boolean | no | all | yes | -| headerBlurEffect | Blur effect for the translucent header. The headerTransparent option needs to be set to true for this to work. | string | no | iOS | no | -| headerBackground | Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient. | function | no | all | yes | -| headerTintColor | Tint color for the header. Changes the color of back button and title. | string | no | all | yes | -| headerLeft | Function which returns a React Element to display on the left side of the header. This replaces the back button. See headerBackVisible to show the back button along side left element. | function | no | all | yes | -| headerRight | Function which returns a React Element to display on the right side of the header. | function | no | all | yes | -| headerTitle | String or a function that returns a React Element to be used by the header. Defaults to title or name of the screen. | string|function | no | all | yes | -| headerTitleAlign | How to align the header title.Defaults to left on platforms other than iOS.Not supported on iOS. It's always center on iOS and cannot be changed. | 'left'|'right' | no | Android | yes | -| headerTitleStyle | Style object for header title. | object | no | all | yes | -| headerSearchBarOptions | Options to render a native search bar on iOS.  | object | no | Android，iOS | no | -| header | Custom header to use instead of the default header. | function | no | all | no | -| statusBarAnimation | Sets the status bar animation (similar to the StatusBar component). Defaults to fade on iOS and none on Android. | 'fade'|'none'|'slide' | no | Android，iOS | no | -| statusBarHidden | Whether the status bar should be hidden on this screen. | boolean | no | Android，iOS | no | -| statusBarStyle | Sets the status bar color (similar to the StatusBar component). Defaults to auto. | string | no | Android，iOS | no | -| statusBarColor | Sets the status bar color (similar to the StatusBar component). Defaults to initial status bar color. | string | no | Android | no | -| statusBarTranslucent | Sets the translucency of the status bar (similar to the StatusBar component). Defaults to false. | boolean | no | Android | no | -| contentStyle | Style object for the scene content. | object | no | all | yes | -| customAnimationOnGesture | Whether the gesture to dismiss should use animation provided to animation prop. Defaults to false. | boolean | no | iOS | no | -| fullScreenGestureEnabled | Whether the gesture to dismiss should work on the whole screen. Using gesture to dismiss with this option results in the same transition animation as simple_push. This behavior can be changed by setting customAnimationOnGesture prop. Achieving the default iOS animation isn't possible due to platform limitations. Defaults to false. | boolean | no | iOS | no | -| gestureEnabled | Whether you can use gestures to dismiss this screen. Defaults to true. | boolean | no | iOS | no | -| animationTypeForReplace | The type of animation to use when this screen replaces another screen. Defaults to pop. | 'push'|'pop' | no | Android，iOS | no | -| animation | How the screen should animate when pushed or popped. | 'default'|'fade'|'fade_from_bottom'|'fade_from_bottom'|'simple_push'|'slide_from_bottom'|'slide_from_right'|'slide_from_left'|'none' | no | Android,iOS | no | -| presentation | How should the screen be presented. | 'card'|'modal'|'transparentModal'|'containedModal'|'containedModal'|'fullScreenModal'|'formSheet' | no | Android，iOS | partially('card'/'transparentModal') | -| orientation | The display orientation to use for the screen. | 'default'|'all'|'portrait'|'portrait_up'|'portrait_down'|'landscape'|'landscape_left'|'landscape_left' | no | Android，iOS | no | -| autoHideHomeIndicator | Boolean indicating whether the home indicator should prefer to stay hidden. Defaults to false. | boolean | no | iOS | no | -| gestureDirection | Sets the direction in which you should swipe to dismiss the screen. | 'vertical '|'horizontal ' | no | iOS | no | -| animationDuration | Changes the duration (in milliseconds) of slide_from_bottom, fade_from_bottom, fade and simple_push transitions on iOS. Defaults to 350. | number | no | iOS | no | -| navigationBarColor | Sets the navigation bar color. Defaults to initial status bar color. | string | no | Android | no | -| navigationBarHidden | Boolean indicating whether the navigation bar should be hidden. Defaults to false. | boolean | no | Android | no | -| 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 | + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ------------ | ----------------- | +| title | 可用作headerTitle回退的字符串. | string | no | all | yes | +| headerBackButtonMenuEnabled | 布尔值，指示在长按 iOS 14 及以上版本的返回按钮时是否显示菜单，默认为 true | boolean | no | iOS | no | +| headerBackVisible | 返回按钮在标题栏中是否可见。如果已指定 headerLeft，可以使用此属性在 headerLeft 旁边显示返回按钮. | boolean | no | Android,iOS | no | +| headerBackTitle | iOS 上返回按钮使用的标题字符串。默认为上一个场景的标题，如果空间不足则为 "Back"。使用 headerBackTitleVisible: false 可隐藏. | string | no | iOS | no | +| headerBackTitleStyle | 标题栏返回标题的样式对象. | object | no | iOS | no | +| headerBackImageSource | 在标题栏中显示为返回按钮图标的图像. | string | no | all | yes | +| headerLargeStyle | 显示大标题时的标题栏样式. | object | no | iOS | no | +| headerLargeTitle | 是否启用大标题，滚动时折叠为常规标题. | string | no | iOS | no | +| headerLargeTitleShadowVisible | 显示大标题时标题栏的投影是否可见. | boolean | no | iOS | no | +| headerLargeTitleStyle | 标题栏中大标题的样式对象. | object | no | iOS | no | +| headerShown | 是否显示标题栏。默认显示标题栏。设置为 false 可隐藏标题栏. | boolean | no | all | yes | +| headerStyle | 标题栏的样式对象. | object | no | all | yes | +| headerShadowVisible | 是否隐藏标题上的标高阴影 (Android) 或底部边框 (iOS)。 | object | no | Android，iOS | yes | +| headerTransparent | 指示导航栏是否半透明的布尔值. | boolean | no | all | yes | +| headerBlurEffect | 半透明标题的模糊效果。 headerTransparent 选项需要设置为 true 才能正常工作. | string | no | iOS | no | +| headerBackground | 返回一个 React 元素以呈现为标题背景的函数。这对于使用图像或渐变等背景非常有用. | function | no | all | yes | +| headerTintColor | 标题的色调颜色。更改后退按钮和标题的颜色. | string | no | all | yes | +| headerLeft | 返回一个 React 元素以显示在标题左侧的函数。这取代了后退按钮。请参阅 headerBackVisible 以显示左侧元素的后退按钮. | function | no | all | yes | +| headerRight | 返回一个 React 元素以显示在标题右侧的函数. | function | no | all | yes | +| headerTitle | 字符串或返回要由标头使用的 React 元素的函数。默认为屏幕的标题或名称. | string|function | no | all | yes | +| headerTitleAlign | 如何对齐标题标题。在 iOS 以外的平台上默认为左对齐。iOS 不支持。它始终以 iOS 为中心，无法更改. | 'left'|'right' | no | Android | yes | +| headerTitleStyle | 标题的样式对象. | object | no | all | yes | +| headerSearchBarOptions | 在 iOS 上呈现本机搜索栏的选项. | object | no | Android，iOS | no | +| header | 使用自定义标头代替默认标头. | function | no | all | no | +| statusBarAnimation | 设置状态栏动画（类似于 StatusBar 组件）。默认在 iOS 上淡入淡出，在 Android 上不淡入淡出. | 'fade'|'none'|'slide' | no | Android，iOS | no | +| statusBarHidden | 状态栏是否应在此屏幕上隐藏. | boolean | no | Android，iOS | no | +| statusBarStyle | 设置状态栏颜色（类似于 StatusBar 组件）。默认为自动. | string | no | Android，iOS | no | +| statusBarColor | 设置状态栏颜色（类似于 StatusBar 组件）。默认为初始状态栏颜色。 | string | no | Android | no | +| statusBarTranslucent | 设置状态栏的半透明度（类似于StatusBar组件）。默认为 false. | boolean | no | Android | no | +| contentStyle | 场景内容的样式对象. | object | no | all | yes | +| customAnimationOnGesturedeprecated from 7.3.10 > | 关闭手势是否应使用提供给动画道具的动画。默认为 false | boolean | no | iOS | no | +| fullScreenGestureEnabled | 关闭手势是否适用于整个屏幕。使用手势来关闭此选项会产生与 simple_push 相同的过渡动画。可以通过设置 customAnimationOnGesture 属性来更改此行为。由于平台限制，无法实现默认的 iOS 动画。默认为 false。 | boolean | no | iOS | no | +| gestureEnabled | 是否可以使用手势关闭此屏幕。默认为 true。 | boolean | no | iOS | no | +| animationTypeForReplace | 当此屏幕替换另一个屏幕时要使用的动画类型。默认为弹出。 | 'push'|'pop' | no | Android，iOS | no | +| animation | 按下或弹出时屏幕应如何呈现动画。 | 'default'|'fade'|'fade_from_bottom'|'fade_from_bottom'|'simple_push'|'slide_from_bottom'|'slide_from_right'|'slide_from_left'|'none' | no | Android,iOS | no | +| presentation | 画面应该如何呈现。 | 'card'|'modal'|'transparentModal'|'containedModal'|'containedModal'|'fullScreenModal'|'formSheet' | no | Android，iOS | partially('card'/'transparentModal') | +| orientation | 屏幕使用的显示方向。 | 'default'|'all'|'portrait'|'portrait_up'|'portrait_down'|'landscape'|'landscape_left'|'landscape_left' | no | Android，iOS | no | +| autoHideHomeIndicator | 指示主页指示器是否应该保持隐藏的布尔值。默认为 false。 | boolean | no | iOS | no | +| gestureDirection | 设置滑动以关闭屏幕的方向。 | 'vertical '|'horizontal ' | no | iOS | no | +| animationDuration | 更改 iOS 上的 slip_from_bottom、fade_from_bottom、fade 和 simple_push 过渡的持续时间（以毫秒为单位）。默认为 350。 | number | no | iOS | no | +| navigationBarColor | 设置导航栏颜色。默认为初始状态栏颜色。 | string | no | Android | no | +| navigationBarHidden | 指示是否应隐藏导航栏的布尔值。默认为 false。 | boolean | no | Android | no | +| freezeOnBlur | 布尔值，指示是否阻止非活动屏幕重新渲染。默认为 false。当react-native-screens包中的enableFreeze()在应用程序顶部运行时，默认为true。 | boolean | no | Android,iOS | no | +| headerBackButtonDisplayMode7.3.10+ | 后退按钮如何显示图标和标题。 | 'default' \| 'generic' \| 'minimal ' | no | iOS | yes | +| animationMatchesGesture7.3.10+ | 要解除的手势是否应使用提供给动画道具的动画。默认为false。不会影响以模式呈现的屏幕的行为。 | boolean | no | iOS | no | +| sheetElevation7.3.10+ | 仅当演示文稿设置为formSheet时才有效。
描述底部工作表阴影高度的整数值，影响底部工作表的阴影高度 | number | no | Android | no | +| sheetExpandsWhenScrolledToEdge7.3.10+ | 仅当演示文稿设置为formSheet时才有效。
控制工作表在滚动时是否应展开到更大的悬停位置。 | boolean | no | iOS | no | +| sheetCornerRadius7.3.10+ | 仅当演示文稿设置为formSheet时才有效。
工作表尝试渲染时使用的圆角半径。 | number | no | Android,iOS | no | +| sheetInitialDetentIndex7.3.10+ | 仅当演示文稿设置为formSheet时才有效。
工作表打开后应展开到的悬停位置的索引。 | number | no | Android,iOS | no | +| sheetGrabberVisible7.3.10+ | 仅当演示文稿设置为formSheet时才有效。
布尔值，指示工作表顶部是否显示抓取器。 | boolean | no | iOS | no | +| sheetLargestUndimmedDetentIndex7.3.10+ | 仅当演示文稿设置为formSheet时才有效。
工作表下方视图不会被调暗的最大悬停位置索引。 | 'none' \| 'last' | no | Android,iOS | no | **Events** + | Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------------|----------------------------------------------------------------------------------|----------|----------|----------|-------------------| -| transitionStart | This event is fired when the transition animation starts for the current screen. | function | no | all | no | -| transitionEnd | This event is fired when the transition animation ends for the current screen. | function | no | all | no | +| transitionStart | 当当前屏幕的过渡动画开始时，会触发此事件。 | function | no | all | no | +| transitionEnd | 当当前屏幕的过渡动画结束时，会触发此事件。 | function | no | all | no | + +**Hooks7.3.10+** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| useAnimatedHeaderHeight | 钩子返回一个表示标题高度的动画值。 | function | no | all | yes | ## 遗留问题 - [ ] react-native-screens功能缺失，导致headerSearchBarOptions等属性功能无法实现：[issue#25](https://github.com/react-native-oh-library/react-navigation/issues/25) +- [ ] V7.3.10 鸿蒙侧未实现formSheet，导致presentation的formSheet未鸿蒙化：[issue#2](https://gitcode.com/openharmony-sig/rntpc_react-navigation/issues/2) +- [ ] V7.3.10 animationMatchesGesture 因依赖三方库react-native-screens而未实现鸿蒙化: [issue#3](https://gitcode.com/openharmony-sig/rntpc_react-navigation/issues/3) ## 其他 -- Gitee