From 4c523058743aaacc2e73bca3b0ef7eca6bfc958e Mon Sep 17 00:00:00 2001
From: zhyx2
Date: Wed, 15 Oct 2025 18:10:08 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:#ID23JV]=20=E6=9B=B4=E6=96=B0re?=
=?UTF-8?q?act-native-oh-tpl/react-native-screens=E5=BA=93=E4=B8=AD?=
=?UTF-8?q?=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: zhyx2
---
...eact-native-oh-tpl-react-native-screens.md | 104 ++++++++++++++++-
...eact-native-oh-tpl-react-native-screens.md | 108 ++++++++++++++++--
2 files changed, 197 insertions(+), 15 deletions(-)
diff --git a/en/react-native-oh-tpl-react-native-screens.md b/en/react-native-oh-tpl-react-native-screens.md
index 3dbbcd7af..14e3876cd 100644
--- a/en/react-native-oh-tpl-react-native-screens.md
+++ b/en/react-native-oh-tpl-react-native-screens.md
@@ -17,27 +17,51 @@
## Installation and Usage
-The implementation of this library depends on the native code from @react-native-oh-tpl/native and @react-navigation/native-stack and @react-native-oh-tpl/react-native-safe-area-context and @react-native-oh-tpl/react-native-gesture-handler. If this library is included into your application, there is no need to include it again; you can skip the steps in this section and use it directly.
+### 3.34.0
+The implementation of this library depends on the native code from @react-navigation/native and @react-navigation/native-stack and @react-native-oh-tpl/react-native-safe-area-context and @react-native-oh-tpl/react-native-gesture-handler. If this library is included into your application, there is no need to include it again; you can skip the steps in this section and use it directly.
Note: If the `@react-native-oh-tpl/native-stack` library has been introduced, please uninstall it. Otherwise, this library will fail to be referenced and cannot be used.
-If it is not included, follow the guide provided in [@react-native-oh-tpl/native](/en/react-navigation-native.md) and [@react-native-oh-tpl/react-native-safe-area-context](/en/react-native-safe-area-context.md) and [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md) to add it to your project.
+If it is not included, follow the guide provided in [@react-navigation/native](/en/react-navigation-native.md) and [@react-native-oh-tpl/react-native-safe-area-context](/en/react-native-safe-area-context.md) and [@react-native-oh-tpl/react-native-gesture-handler](/en/react-native-gesture-handler.md) to add it to your project.
-Please visit the Releases page of the third-party library to check the corresponding version information: [@react-native-oh-tpl/react-native-screens Releases](https://github.com/react-native-oh-library/react-native-harmony-screens/releases). For older versions that have not been published to npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package.
+### 4.8.1
+The implementation of this library depends on the native code from @react-navigation/native and @react-navigation/native-stack and @react-native-ohos/react-native-safe-area-context and @react-native-ohos/react-native-gesture-handler and @react-native-ohos/react-native-reanimated. If this library is included into your application, there is no need to include it again; you can skip the steps in this section and use it directly.
+
+Note: If the `@react-native-oh-tpl/native-stack,@react-native-ohos/native-stack` library has been introduced, please uninstall it. Otherwise, this library will fail to be referenced and cannot be used.
+
+If it is not included, follow the guide provided in [@react-navigation/native](/en/react-navigation-native.md) and [@react-native-ohos/react-native-safe-area-context](/en/react-native-safe-area-context.md) and [@react-native-ohos/react-native-gesture-handler](/en/react-native-gesture-handler.md) and [@react-native-ohos/react-native-reanimated](/en/react-native-reanimated.md) to add it to your project.
+
+Please visit the Releases page of the third-party library to check the corresponding version information:
+| Version | Releases info | Support RN version |
+| ----------- | ------------------------------------------------------------ | ---------- |
+|3.34.0|[@react-native-oh-tpl/react-native-screens Releases](https://github.com/react-native-oh-library/react-native-harmony-screens/releases) |0.72|
+|4.8.1|[@react-native-ohos/react-native-screens Releases]() |0.77|
+
+For older versions that have not been published to npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package.
Go to the project directory and execute the following instruction:
#### **npm**
```bash
-npm install @react-native-oh-tpl/react-native-screens
+# 0.72
+npm install @react-native-oh-tpl/react-native-screens@3.34.0-X.X.X
npm install @react-navigation/native-stack@6.9.13
+
+# 0.77
+npm install @react-native-ohos/react-native-screens@4.8.1-X.X.X
+npm install @react-navigation/native-stack@7.2.0
```
#### **yarn**
```bash
-yarn install @react-native-oh-tpl/react-native-screens
+# 0.72
+yarn install @react-native-oh-tpl/react-native-screens@3.34.0-X.X.X
yarn install @react-navigation/native-stack@6.9.13
+
+# 0.77
+yarn install @react-native-ohos/react-native-screens@4.8.1-X.X.X
+yarn install @react-navigation/native-stack@7.2.0
```
The following code shows the basic use scenario of the repository:
@@ -127,6 +151,8 @@ export default function App() {
## Use Codegen
+>[! TIP] V4.8.1 does not require execution of Codegen.
+
If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/codegen.md).
## Link
@@ -155,12 +181,20 @@ 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:../../node_modules/@rnoh/react-native-harmony/harmony/react_native_openharmony.har",
"@react-native-oh-tpl/react-native-screens": "file:../../node_modules/@react-native-oh-tpl/react-native-screens/harmony/screens.har"
}
```
+- 0.77
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../../node_modules/@rnoh/react-native-harmony/harmony/react_native_openharmony.har",
+ "@react-native-ohos/react-native-screens": "file:../../node_modules/@react-native-ohos/react-native-screens/harmony/screens.har"
+ }
+```
Click the `sync` button in the upper right corner.
@@ -198,7 +232,11 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn)
# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+# 72
+ add_subdirectory("${OH_MODULES_DIR}/@react-native-oh-tpl/react-native-screens/src/main/cpp" ./rnoh_screens)
+
+# 77
++ add_subdirectory("${OH_MODULES_DIR}/@react-native-ohos/react-native-screens/src/main/cpp" ./rnoh_screens)
# RNOH_END: manual_package_linking_1
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
@@ -240,8 +278,12 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src
```diff
...
+// 72
+ import { componentBuilder } from "@react-native-oh-tpl/react-native-screens"
+// 77
++ import { componentBuilder } from "@react-native-ohos/react-native-screens"
+
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
@@ -278,8 +320,12 @@ Open `src/main/ets/RNOHPackagesFactory.ets`, add:
```diff
import type { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony';
+// 72
+ import RnohReactNativeHarmonyScreensPackage from '@react-native-oh-tpl/react-native-screens';
+// 77
++ import RnohReactNativeHarmonyScreensPackage from '@react-native-ohos/react-native-screens';
+
export function createRNOHPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -308,7 +354,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-screens Releases](https://github.com/react-native-oh-library/react-native-harmony-screens/releases)
+Check the release version information in the release address of the third-party library:
+| Version | Releases info | Support RN version |
+| ----------- | ------------------------------------------------------------ | ---------- |
+|3.34.0|[@react-native-oh-tpl/react-native-screens Releases](https://github.com/react-native-oh-library/react-native-harmony-screens/releases) |0.72|
+|4.8.1|[@react-native-ohos/react-native-screens Releases]() |0.77|
## Properties
@@ -352,6 +402,7 @@ Check the release version information in the release address of the third-party
| backTitle | Title to display in the back button. | property | No | iOS Android | Yes |
| backTitleFontSize | Allows for customizing font size to be used for back button title | property | No | iOS Android | Yes |
| backTitleVisible | Whether the back button title should be visible or nots | property | No | iOS Android | Yes |
+| backTitleVisible4.8.1 | Whether the back button title should be visible or nots | property | No | iOS Android | No |
| title | String that can be displayed in the header as a fallback for `headerTitle` | property | No | iOS Android | Yes |
| titleFontSize | Customize the size of the font to be used for the title. | property | No | iOS Android | Yes |
| titleFontWeight | Customize the weight of the font to be used for the title. | property | No | iOS Android | Yes |
@@ -371,10 +422,51 @@ Check the release version information in the release address of the third-party
| onOpen | A callback that gets called when search bar is opened | function | No | iOS Android | Yes |
| headerIconColor | The search and close icon color shown in the header | property | No | iOS Android | Yes |
| shouldShowHintSearchIcon | Show the search hint icon when search bar is focused | property | No | iOS Android | Yes |
+| blurEffect4.8.1 | Blur effect to be applied to the header. | property | No | iOS | Yes |
+| tintColor4.8.1 | The color for the cursor caret and cancel button text | property | No | iOS | Yes |
+| color4.8.1 | Controls the color of items rendered on the header. This includes back icon, back text (iOS only) and title text. If you want the title to have different color use titleColor property. | property | No | iOS Android | Yes |
+| hideWhenScrolling4.8.1 | Boolean indicating whether to hide the search bar when scrolling. Defaults to `true`. | property | No | iOS | No |
+| largeTitle4.8.1 | When set to `true`, it makes the title display using the large title effect. | property | No | iOS | No |
+| largeTitleFontFamily4.8.1 | Customize font family to be used for the large title. | property | No | iOS | No |
+| largeTitleFontSize4.8.1 | Customize the size of the font to be used for the large title. | property | No | iOS | No |
+| largeTitleFontWeight4.8.1 | Customize the weight of the font to be used for the large title. | property | No | iOS | No |
+| largeTitleHideShadow4.8.1 | Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar. | property | No | iOS | No |
+| largeTitleColor4.8.1 | Customize the color to be used for the large title. By default uses the `titleColor` property. | property | No | iOS | No |
+| autoCapitalize4.8.1 | Controls whether the text is automatically auto-capitalized as it is entered by the user. | property | No | iOS Android | No |
+| placement4.8.1 | Placement of the search bar in the navigation bar. | property | No | iOS | No |
+| obscureBackground4.8.1 | Boolean indicating whether to obscure the underlying content with semi-transparent overlay. Defaults to `true`. | property | No | iOS | No |
+| hideNavigationBar4.8.1 | Boolean indicating whether to hide the navigation bar during searching. Defaults to `true`. | property | No | iOS | No |
+| disableBackButtonOverride4.8.1 | Default behavior is to prevent screen from going back when search bar is open (`disableBackButtonOverride: false`). If you don't want this to happen set `disableBackButtonOverride` to `true`. | property | No | Android | No |
+| customAnimationOnSwipe4.8.1 | Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`. | property | No | iOS | No |
+| fullScreenSwipeShadowEnabled4.8.1 | Boolean indicating whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the default iOS shadow. Defaults to `true`. | property | No | iOS | No |
+| homeIndicatorHidden4.8.1 | Whether the home indicator should be hidden on this screen. Defaults to `false`. | property | No | iOS | No |
+| statusBarAnimation4.8.1 | Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file. On Android, this prop considers the transition of changing status bar color . There will be no animation if `none` provided. | property | No | iOS Android | No |
+| transitionDuration4.8.1 | Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `500`. The duration of `default` and `flip` transitions isn't customizable. | property | No | iOS | No |
+| hideKeyboardOnSwipe4.8.1 | Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`. | property | No | iOS | No |
+| disableBackButtonMenu4.8.1 | Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. | property | No | iOS | No |
+| backButtonDisplayMode4.8.1 | Enum value indicating display mode of **default** back button. It works on iOS >= 14, and is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` or `backTitle` is set. Otherwise, when the button is customized, under the hood we use iOS native `backButtonItem` which overrides `backButtonDisplayMode`. | property | No | iOS | No |
+| backButtonInCustomView4.8.1 | Whether to show the back button with a custom left side of the header. | property | No | iOS | No |
+| direction | Controls whether the stack should be in `rtl` or `ltr` form. | property | No | iOS Android | No |
+| topInsetEnabled4.8.1 | A flag to that lets you opt out of insetting the header. You may want to set this to `false` if you use an opaque status bar. Defaults to `true`. | property | No | Android | No |
## Known Issues
- [ ] The formSheet page is currently using a regular page, and the Context.openBindSheet system method used on this page has a misalignment of the binding position of the JS page, resulting in unresponsive button events. Need to be supplemented after system correction. [issue#4](https://github.com/react-native-oh-library/react-native-harmony-screens/issues/4)
+- [ ] RNSScreenFooter depends on formSheet. This function needs to be added after the formSheet function is implemented. [issue#28](https://github.com/react-native-oh-library/react-native-harmony-screens/issues/28)
+
+- [ ] GestureDetectorProvider cannot be referenced in the 77 environment according to the original library reference method, and requires system framework positioning processing。 [issue#29](https://github.com/react-native-oh-library/react-native-harmony-screens/issues/29)
+
+- [ ] When different properties are set in Option in Screen and its subcomponents, the properties received by ETS side in 77 environment are lost. System framework positioning processing is required. [issue#30](https://github.com/react-native-oh-library/react-native-harmony-screens/issues/30)
+
+- [ ] sheetInitialDetent: Index of the detent the sheet should expand to after being opened. Attributes of the formsheet function. Not implemented
+- [ ] sheetElevation: Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.Attributes of the formsheet function. Not implemented
+- [ ] sheetAllowedDetents: Describes heights where a sheet can rest. Attributes of the formsheet function. Not implemented
+- [ ] sheetLargestUndimmedDetent: The largest sheet detent for which a view underneath won't be dimmed. Attributes of the formsheet function. Not implemented
+- [ ] sheetGrabberVisible: Boolean indicating whether the sheet shows a grabber at the top. Attributes of the formsheet function. Not implemented
+- [ ] sheetCornerRadius: The corner radius that the sheet will try to render with. Attributes of the formsheet function. Not implemented
+- [ ] sheetExpandsWhenScrolledToEdge: Whether the sheet should expand to larger detent when scrolling. Attributes of the formsheet function. Not implemented
+- [ ] onSheetDetentChanged: A callback that gets called when the current screen is in `formSheet` presentation and its detent has changed. Callback for formsheet function. Not implemented
+
## Others
## License
diff --git a/zh-cn/react-native-oh-tpl-react-native-screens.md b/zh-cn/react-native-oh-tpl-react-native-screens.md
index 59e0a2a16..08bb3dd47 100644
--- a/zh-cn/react-native-oh-tpl-react-native-screens.md
+++ b/zh-cn/react-native-oh-tpl-react-native-screens.md
@@ -1,6 +1,6 @@
> 模板版本:v0.2.2
-
+
[react-native-oh-tpl-react-native-screens.md](../en/react-native-oh-tpl-react-native-screens.md)
@react-native-oh-tpl/react-native-screens
@@ -16,29 +16,52 @@
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-harmony-screens)
## 安装与使用
-
+### 3.34.0
本库实现依赖 @react-navigation/native 、 @react-navigation/native-stack 、 @react-native-oh-tpl/react-native-safe-area-context 、 @react-native-oh-tpl/react-native-gesture-handler 的原生端代码,如已在工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。
注:若已引入 `@react-native-oh-tpl/native-stack` 库,请务必卸载,否则本库将无法正确指向,导致无法使用。
如未引入请参照 [@react-navigation/native 文档的 Link 章节](/zh-cn/react-navigation-native.md) ,[@react-native-oh-tpl/react-native-gesture-handler 文档的 Link 章节](/zh-cn/react-native-gesture-handler.md) ,[@react-native-oh-tpl/react-native-safe-area-context 文档的 Link 章节](/zh-cn/react-native-safe-area-context.md)进行引入。
-请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-screens Releases](https://github.com/react-native-oh-library/react-native-harmony-screens/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+### 4.8.1
+本库实现依赖 @react-navigation/native 、 @react-navigation/native-stack 、 @react-native-ohos/react-native-safe-area-context 、 @react-native-ohos/react-native-gesture-handler、@react-native-ohos/react-native-reanimated 的原生端代码,如已在工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。
+
+注:若已引入 `@react-native-oh-tpl/native-stack,@react-native-ohos/native-stack` 库,请务必卸载,否则本库将无法正确指向,导致无法使用。
+
+如未引入请参照 [@react-navigation/native 文档的 Link 章节](/zh-cn/react-navigation-native.md) ,[@react-native-ohos/react-native-gesture-handler 文档的 Link 章节](/zh-cn/react-native-gesture-handler.md) ,[@react-native-ohos/react-native-safe-area-context 文档的 Link 章节](/zh-cn/react-native-safe-area-context.md),[@react-native-ohos/react-native-reanimated 文档的 Link 章节](/zh-cn/react-native-reanimated.md)进行引入。
+
+请到三方库的 Releases 发布地址查看配套的版本信息:
+| 三方库版本 | 发布信息 | 支持RN版本 |
+| ----------- | ------------------------------------------------------------ | ---------- |
+|3.34.0|[@react-native-oh-tpl/react-native-screens Releases](https://github.com/react-native-oh-library/react-native-harmony-screens/releases) |0.72|
+|4.8.1|[@react-native-ohos/react-native-screens Releases]() |0.77|
+
+对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令:
#### **npm**
```bash
-npm install @react-native-oh-tpl/react-native-screens
+# 0.72
+npm install @react-native-oh-tpl/react-native-screens@3.34.0-X.X.X
npm install @react-navigation/native-stack@6.9.13
+
+# 0.77
+npm install @react-native-ohos/react-native-screens@4.8.1-X.X.X
+npm install @react-navigation/native-stack@7.2.0
```
#### **yarn**
```bash
-yarn install @react-native-oh-tpl/react-native-screens
+# 0.72
+yarn install @react-native-oh-tpl/react-native-screens@3.34.0-X.X.X
yarn install @react-navigation/native-stack@6.9.13
+
+# 0.77
+yarn install @react-native-ohos/react-native-screens@4.8.1-X.X.X
+yarn install @react-navigation/native-stack@7.2.0
```
下面的代码展示了这个库的基本使用场景:
@@ -127,6 +150,8 @@ export default function App() {
## 使用 Codegen
+> [!TIP] V4.8.1 不需要执行 Codegen。
+
本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md)。
## Link
@@ -159,12 +184,20 @@ export default function App() {
打开 `entry/oh-package.json5`,添加以下依赖
+- 0.72
```json
"dependencies": {
"@rnoh/react-native-openharmony": "file:../../node_modules/@rnoh/react-native-harmony/harmony/react_native_openharmony.har",
"@react-native-oh-tpl/react-native-screens": "file:../../node_modules/@react-native-oh-tpl/react-native-screens/harmony/screens.har"
}
```
+- 0.77
+```json
+"dependencies": {
+ "@rnoh/react-native-openharmony": "file:../../node_modules/@rnoh/react-native-harmony/harmony/react_native_openharmony.har",
+ "@react-native-ohos/react-native-screens": "file:../../node_modules/@react-native-ohos/react-native-screens/harmony/screens.har"
+ }
+```
点击右上角的 `sync` 按钮
@@ -202,7 +235,11 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn)
# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+# 0.72
+ add_subdirectory("${OH_MODULES_DIR}/@react-native-oh-tpl/react-native-screens/src/main/cpp" ./rnoh_screens)
+
+# 0.77
++ add_subdirectory("${OH_MODULES_DIR}/@react-native-ohos/react-native-screens/src/main/cpp" ./rnoh_screens)
# RNOH_END: manual_package_linking_1
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
@@ -244,8 +281,12 @@ std::vector> PackageProvider::getPackages(Package::Cont
```diff
...
+// 0.72
+ import { componentBuilder } from "@react-native-oh-tpl/react-native-screens"
+// 0.77
++ import { componentBuilder } from "@react-native-ohos/react-native-screens"
+
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
@@ -272,7 +313,6 @@ const arkTsComponentNames: Array = [
+ "RNSScreenStackHeaderSubview",
+ "RNSSearchBar",
+ "RNSScreenStackHeaderConfig",
-+ "RNSScreenStackHeaderSubview"
];
```
@@ -283,8 +323,12 @@ const arkTsComponentNames: Array = [
```diff
...
import type { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony';
+// 0.72
+ import RnohReactNativeHarmonyScreensPackage from '@react-native-oh-tpl/react-native-screens';
+// 0.77
++ import RnohReactNativeHarmonyScreensPackage from '@react-native-ohos/react-native-screens';
+
export function createRNOHPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
@@ -312,7 +356,11 @@ ohpm install
要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-harmony-screens Releases](https://github.com/react-native-oh-library/react-native-harmony-screens/releases)
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:
+| 三方库版本 | 发布信息 | 支持RN版本 |
+| ----------- | ------------------------------------------------------------ | ---------- |
+|3.34.0|[@react-native-oh-tpl/react-native-screens Releases](https://github.com/react-native-oh-library/react-native-harmony-screens/releases) |0.72|
+|4.8.1|[@react-native-ohos/react-native-screens Releases]() |0.77|
## 属性
@@ -340,7 +388,7 @@ ohpm install
| onWillDisappear | 页面将消失 | function | No | iOS Android | Yes |
| fullScreenSwipeEnabled | 全屏滑动 | property | No | iOS Android | Yes |
| gestureEnabled | 是否开启手势滑动 | property | No | iOS Android | Yes |
-| statusBarColor | 状态栏颜色 | property | No | iOS Android | No |
+| statusBarColor | 状态栏颜色 | property | No | Android | No |
| screenOrientation | 屏幕显示方向 | property | No | iOS Android | Yes |
| statusBarStyle | 状态栏样式 | property | No | iOS Android | Yes |
| statusBarTranslucent | 状态栏是否透明化 | property | No | iOS Android | Yes |
@@ -355,7 +403,8 @@ ohpm install
| hideBackButton | 隐藏标题栏返回按钮 | property | No | iOS Android | Yes |
| backTitle | 返回按钮文本内容 | property | No | iOS Android | Yes |
| backTitleFontSize | 返回按钮文本字号大小 | property | No | iOS Android | Yes |
-| backTitleVisible | 返回按钮文本是否显示 | property | No | iOS Android | Yes |
+| backTitleVisible | 返回按钮文本是否显示 | property | No | iOS Android | Yes |
+| backTitleVisible4.8.1 | 返回按钮文本是否显示 | property | No | iOS Android | No |
| title | 标题栏标题 | property | No | iOS Android | Yes |
| titleFontSize | 标题字号大小 | property | No | iOS Android | Yes |
| titleFontWeight | 标题字号比重 | property | No | iOS Android | Yes |
@@ -375,10 +424,51 @@ ohpm install
| onOpen | 展示搜索 | function | No | iOS Android | Yes |
| headerIconColor | 图标颜色 | property | No | iOS Android | Yes |
| shouldShowHintSearchIcon | 是否隐藏搜索图标 | property | No | iOS Android | Yes |
+| blurEffect4.8.1 | 应用于页眉的模糊效果 | property | No | iOS | Yes |
+| tintColor4.8.1 | 光标插入符和取消按钮文本的颜色 | property | No | iOS | Yes |
+| color4.8.1 | 控制标题上呈现的项目的颜色。这包括后退图标、后退文本(仅限iOS)和标题文本。如果希望标题具有不同的颜色,请使用titleColor属性。 | property | No | iOS Android | Yes |
+| hideWhenScrolling4.8.1 | 布尔值,指示滚动时是否隐藏搜索栏。默认为“true”。 | property | No | iOS | No |
+| largeTitle4.8.1 | 当设置为“true”时,它会使用大标题效果显示标题。 | property | No | iOS | No |
+| largeTitleFontFamily4.8.1 | 自定义用于大标题的字体系列。 | property | No | iOS | No |
+| largeTitleFontSize4.8.1 | 自定义用于大标题的字体大小。 | property | No | iOS | No |
+| largeTitleFontWeight4.8.1 | 自定义用于大标题的字体的粗细。 | property | No | iOS | No |
+| largeTitleHideShadow4.8.1 | 布尔值,允许在任何可滚动内容的边缘到达导航栏的匹配边缘时禁用导航标题下的阴影。 | property | No | iOS | No |
+| largeTitleColor4.8.1 | 自定义用于大标题的颜色。默认情况下使用`titleColor`属性。 | property | No | iOS | No |
+| autoCapitalize4.8.1 | 控制用户输入文本时是否自动大写。 | property | No | iOS | No |
+| placement4.8.1 | 将搜索栏放置在导航栏中 | property | No | iOS | No |
+| obscureBackground4.8.1 | 布尔值,指示是否使用半透明覆盖来遮挡底层内容。默认为“true”。 | property | No | iOS | No |
+| hideNavigationBar4.8.1 | 布尔值,指示在搜索过程中是否隐藏导航栏。 | property | No | iOS | No |
+| disableBackButtonOverride4.8.1 | 默认行为是在搜索栏打开时 阻止屏幕返回(`disableBackButtonOverride:false `)。如果你不想发生这种情况,请将“disableBackButtonOverride”设置为“true”。 | property | No | Android | No |
+| customAnimationOnSwipe4.8.1 | 布尔值,表示滑动解除应触发“stackAnimation”提供的动画。默认为“false”。 | property | No | iOS | No |
+| fullScreenSwipeShadowEnabled4.8.1 | 布尔值,指示全屏解除手势在过渡期间是否在视图下有阴影。手势使用自定义过渡,因此默认情况下没有阴影。启用后,在转换过程中会添加一个自定义阴影视图,试图模仿默认iOS阴影。默认为“true”。 | property | No | iOS | No |
+| homeIndicatorHidden4.8.1 | 主页指示器是否应在此屏幕上隐藏。默认为“false”。 | property | No | iOS | No |
+| statusBarAnimation4.8.1 | 设置状态栏动画(类似于“StatusBar”组件)。需要在Info.plist文件中启用(或删除)“基于视图控制器的状态栏外观”。在Android上,此道具考虑了更改状态栏颜色的过渡.如果“无”提供,则不会有动画。 | property | No | iOS | No |
+| transitionDuration | 更改iOS上“slide_from_bottom”、“fade_from_bottom”和“fade”和“simple_push”转换的持续时间(以毫秒为单位)。默认为“500”。“默认”和“翻转”过渡的持续时间是不可定制的。 | property | No | iOS | No |
+| hideKeyboardOnSwipe4.8.1 | 滑至上一屏幕时,键盘是否应隐藏。默认为“false”。 | property | No | iOS | No |
+| disableBackButtonMenu4.8.1 | 布尔值,指示是否在iOS>=14的longPress后退按钮上显示菜单。 | property | No | iOS | No |
+| backButtonDisplayMode4.8.1 | 枚举值表示**默认**后退按钮的显示模式。它适用于iOS>=14,仅在未设置“backTitleFontFamily”、“backTitle FontSize”、“disableBackButtonMenu”或“backTitle”时使用。否则,当按钮被定制时,在幕后我们使用iOS原生的`backButtonItem`,它覆盖了`backButtonDisplayMode`。 | property | No | iOS | No |
+| backButtonInCustomView4.8.1 | 是否显示带有自定义页眉左侧的后退按钮。 | property | No | iOS | No |
+| direction | 控制堆栈应采用“rtl”还是“ltr”形式。 | property | No | iOS Android | No |
+| topInsetEnabled4.8.1 | 一个标志,可以让你选择不插入标题。如果您使用不透明的状态栏,您可能希望将其设置为“false”。默认为“true”。 | property | No | Android | No |
## 遗留问题
- [ ] formSheet页面暂使用普通页面,该页面使用的Context.openBindSheet系统方法存在绑定的js页面绑定的位置错乱,造成按钮事件会无法响应。需要系统修正后补充。 [issue#4](https://github.com/react-native-oh-library/react-native-harmony-screens/issues/4)
+- [ ] RNSScreenFooter依赖formSheet。需要实现formSheet功能后再补充该功能。 [issue#28](https://github.com/react-native-oh-library/react-native-harmony-screens/issues/28)
+
+- [ ] GestureDetectorProvider按原库的引用方式在77环境上引用不到,需要系统框架定位处理。 [issue#29](https://github.com/react-native-oh-library/react-native-harmony-screens/issues/29)
+
+- [ ] 在Screen和其子组件中通过Option有设置不同属性时,在77环境ets侧接收到的属性有丢失。需要系统框架定位处理后。 [issue#30](https://github.com/react-native-oh-library/react-native-harmony-screens/issues/30)
+
+- [ ] sheetInitialDetent 打开后,表单的棘爪索引应扩展到。formsheet功能的属性。 未实现
+- [ ] sheetElevation 描述表单标高的整数值,影响表单顶部边缘的阴影。formsheet功能的属性。 未实现
+- [ ] sheetAllowedDetents 描述表单可以放置的高度。formsheet功能的属性。 未实现
+- [ ] sheetLargestUndimmedDetent 最大的表单棘爪,其下方视图不会变暗。formsheet功能的属性。 未实现
+- [ ] sheetGrabberVisible 布尔值,指示工作表顶部是否显示抓取器。formsheet功能的属性。 未实现
+- [ ] sheetCornerRadius 表单将尝试渲染的角半径。formsheet功能的属性。 未实现
+- [ ] sheetExpandsWhenScrolledToEdge 滚动时,表单是否应扩展到更大的棘爪。formsheet功能的属性。 未实现
+- [ ] onSheetDetentChanged 当当前屏幕处于“formSheet”演示状态并且其定位符已更改时调用的回调。formsheet功能的回调。 未实现
+
## 其他
## 开源协议
--
Gitee