diff --git a/zh-cn/react-native-screens.md b/zh-cn/react-native-screens.md
index fc118f1bbb05a00f66fd4895c136d18b70f7db0b..e84fdcbfb92e2f112060395222f57e70da7081f5 100644
--- a/zh-cn/react-native-screens.md
+++ b/zh-cn/react-native-screens.md
@@ -1,5 +1,4 @@
-
-> 模板版本:v0.1.3
+> 模板版本:v0.2.2
react-native-screens
@@ -8,11 +7,13 @@
-
+
+> [!tip] [Github 地址](https://github.com/software-mansion/react-native-screens)
+
## 安装与使用
进入到工程目录并输入以下命令:
@@ -22,12 +23,8 @@
#### **npm**
```bash
-npm install @react-navigation/bottom-tabs
npm install @react-navigation/native
-npm install @react-navigation/native-stack
-npm install @react-navigation/stack
-npm install @react-native-oh-tpl/react-native-gesture-handler
-npm install react-native-reanimated
+npm install @react-native-oh-tpl/stack
npm install @react-native-oh-tpl/react-native-safe-area-context
npm install react-native-screens
```
@@ -35,80 +32,78 @@ npm install react-native-screens
#### **yarn**
```bash
-yarn add @react-navigation/bottom-tabs
yarn add @react-navigation/native
-yarn add @react-navigation/native-stack
yarn add @react-navigation/stack
-yarn add @react-native-oh-tpl/react-native-gesture-handler
-yarn add react-native-reanimated
yarn add @react-native-oh-tpl/react-native-safe-area-context
yarn add react-native-screens
```
-声明:[@react-native-oh-tpl/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md)和[@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)需要进行额外的配置,详情请去对应的文档查看。
-
下面的代码展示了这个库的基本使用场景:
+> [!WARNING] 使用时 import 的库名不变。
+
```js
-import React from "react";
-import { NavigationContainer, ParamListBase } from "@react-navigation/native";
-import { ScrollView, Button, Tesxt } from "react-native";
-import { NativeStackNavigationProp } from "react-native-screens";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { createStackNavigator } from "@react-navigation/stack";
+import React from 'react';
+import {ScrollView, Button, View, Text} from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
import { enableScreens } from "react-native-screens";
enableScreens(false);
+function Home({navigation}) {
+ return (
+
+
+ Home Screen
+
+
+ );
+}
+
+function Detail({navigation}) {
+ return (
+
+ 我是Details Screen
+
+ );
+}
const Stack = createStackNavigator();
function NativeNavigation() {
- return (
-
-
-
-
-
- );
-}
-
-const Tab = createBottomTabNavigator();
-const NestedNavigator = () => (
-
-
-
-);
-
-function Home({
- navigation,
-}: {
- navigation: NativeStackNavigationProp,
-}) {
- return (
-
-
- );
+ return (
+
+
+
+
+
+
+ );
}
export default function RNScreenTest() {
- return ;
+ return ;
}
+
```
#### 禁用 `react-native-screens`
-因为 ArkUI(Navigation、NavRouter、NavDestination)没有代理任何独特功能,且无法映射到 main_page 通过页面容器优化性能,所以 react-native-screens 禁用 HarmonyOS 原生屏幕使用 react-native views 即可,请在您的入口文件中添加以下代码。 (例如. `App.js`):
+因为 ArkUI侧未提供capi接口,容器组件需要capi化,故本库未实现harmonyOS原生化,所以 react-native-screens 禁用 HarmonyOS 原生屏幕使用 react-native views 即可,请在您的入口文件中添加以下代码。 (例如. `App.js`):
```js
import { enableScreens } from "react-native-screens";
@@ -116,40 +111,48 @@ import { enableScreens } from "react-native-screens";
enableScreens(false);
```
-您还可以通过[`detachInactiveScreens`](https://reactnavigation.org/docs/stack-navigator#detachinactivescreens)在每个导航器中禁用使用原生屏幕。
+您还可以通过[detachInactiveScreens](https://reactnavigation.org/docs/stack-navigator#detachinactivescreens)在每个导航器中禁用原生屏幕。
+
+## Link
+
+本库 HarmonyOS 侧实现依赖 @react-native-oh-tpl/stack 与 @react-native-oh-tpl/react-native-safe-area-context 的原生端代码,如已在 HarmonyOS 工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。
-## 兼容性
+如未引入请参照 [@react-native-oh-tpl/stack 文档的 Link 章节](/zh-cn/react-navigation-stack.md) 与 [@react-native-oh-tpl/react-native-safe-area-context 文档的 Link 章节](/zh-cn/react-native-safe-area-context.md)进行引入。
+
+## 约束与限制
+### 兼容性
本文档内容基于以下版本验证通过:
-1. RNOH:0.72.11; SDK:OpenHarmony(api11) 4.1.0.53; IDE:DevEco Studio 4.1.3.412; ROM:2.0.0.52;
-2. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.58;
+1.RNOH:0.72.29; SDK:HarmonyOS-NEXT-DB6 5.0.0.61; IDE:DevEco Studio 5.0.3.706; ROM:3.0.0.60;
## 属性
-| Name | Description | Type | Required | Platform | HarmonyOS Support |
-| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
-| enableScreens | 支持原生及其 React Native View | function | No | All | Yes |
-| enableFreeze | 对 react-freeze 的支持,使用 ReactSuspense 机制来防止 React 组件树的部分渲染 | function | No | All | Yes |
-| createNativeStackNavigator | 提供屏幕切换的能力 | function | No | All | NO |
-| NativeStackNavigationProp | 切换页面属性的封装 | object | No | All | Yes |
-| NativeStackNavigationOptions | 导航栏属性设置封装 | object | No | All | NO |
-| FullWindowOverlay | 一个组件,可以将其子组件放在其他组件之上 | object | No | All | Yes |
-| SearchBarProps | 搜索栏的属性设置封装 | object | No | All | NO |
-| SearchBarCommands | 搜索栏的操作封装 | object | No | All | NO |
-| useTransitionProgress | 提供屏幕过渡的动画插值器 | function | No | All | NO |
-| userReanimatedTransitionProgress ReanimatedScreenProvider | 屏幕切换期间调用的帧回调,用于 react-native-reanimated 2.0 及其以上的版本,并使用 ReanimatedScreenProvider 进行封装 | function | No | All | NO |
-| userHeaderHeight | 计算静态标题栏的高度,当屏幕方向发生更改,此值会发生更改 | function | No | All | NO |
-| userAnimatedHeaderHeight | 动态计算标题栏的高度,此值会随着每个视图布局变化而变化 | function | No | All | NO |
-
-[原库接口文档](https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md) ,欢迎提交 [issue](https://gitee.com/react-native-oh-library/usage-docs/issues).
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+|-----------------------------------------------------------|---------------------------------------------------------------------------------------|----------|----------|-------------|-------------------|
+| enableScreens | 支持原生及其 React Native View | function | No | iOS Android | Yes |
+| enableFreeze | 对 react-freeze 的支持,使用 ReactSuspense 机制来防止 React 组件树的部分渲染 | function | No | iOS Android | Yes |
+| createNativeStackNavigator | 提供屏幕切换的能力 | function | No | iOS Android | NO |
+| NativeStackNavigationProp | 切换页面属性的封装 | object | No | iOS Android | Yes |
+| NativeStackNavigationOptions | 导航栏属性设置封装 | object | No | iOS Android | NO |
+| FullWindowOverlay | 一个组件,可以将其子组件放在其他组件之上 | object | No | iOS Android | NO |
+| SearchBarProps | 搜索栏的属性设置封装 | object | No | iOS Android | NO |
+| SearchBarCommands | 搜索栏的操作封装 | object | No | iOS Android | NO |
+| useTransitionProgress | 提供屏幕过渡的动画插值器 | function | No | iOS Android | NO |
+| userReanimatedTransitionProgress ReanimatedScreenProvider | 屏幕切换期间调用的帧回调,用于 react-native-reanimated 2.0 及其以上的版本,并使用 ReanimatedScreenProvider 进行封装 | function | No | iOS Android | NO |
+| userHeaderHeight | 计算静态标题栏的高度,当屏幕方向发生更改,此值会发生更改 | function | No | iOS Android | NO |
+| userAnimatedHeaderHeight | 动态计算标题栏的高度,此值会随着每个视图布局变化而变化 | function | No | iOS Android | NO |
## 遗留问题
+- [ ] ArkUI侧未提供capi接口,容器组件需要capi化,故本库未实现harmonyOS原生化适配,harmonyOS侧仅支持部分属性。
+
## 其他
## 开源协议
本项目基于 [The MIT License (MIT)](https://github.com/software-mansion/react-native-screens/blob/main/LICENSE) ,请自由地享受和参与开源。
-
-
\ No newline at end of file