From 8369370548a08b244e7f599b64b1eb8226805d7b Mon Sep 17 00:00:00 2001
From: xiaohaoyu123 <xiaohaoyu1@h-partners.com>
Date: Mon, 20 May 2024 16:29:57 +0800
Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9QP65]=20=E6=B7=BB=E5=8A=A0react-n?=
 =?UTF-8?q?avigation=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zh-cn/flipper-plugin-react-navigation.md      |  60 +++++++
 zh-cn/react-navigation-core.md                | 129 +++++++++++++++
 zh-cn/react-navigation-devtools.md            |  74 +++++++++
 .../react-navigation-material-bottom-tabs.md  | 139 ++++++++++++++++
 zh-cn/react-navigation-material-top-tabs.md   | 136 ++++++++++++++++
 zh-cn/react-navigation-routers.md             | 149 ++++++++++++++++++
 6 files changed, 687 insertions(+)
 create mode 100644 zh-cn/flipper-plugin-react-navigation.md
 create mode 100644 zh-cn/react-navigation-core.md
 create mode 100644 zh-cn/react-navigation-devtools.md
 create mode 100644 zh-cn/react-navigation-material-bottom-tabs.md
 create mode 100644 zh-cn/react-navigation-material-top-tabs.md
 create mode 100644 zh-cn/react-navigation-routers.md

diff --git a/zh-cn/flipper-plugin-react-navigation.md b/zh-cn/flipper-plugin-react-navigation.md
new file mode 100644
index 00000000..5d7d3005
--- /dev/null
+++ b/zh-cn/flipper-plugin-react-navigation.md
@@ -0,0 +1,60 @@
+> 模板版本：v0.2.1
+
+<p align="center">
+  <h1 align="center"> <code>flipper-plugin-react-navigation</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation">
+        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
+    </a>
+    <a href="https://github.com/react-navigation/react-navigation/blob/6.x/packages/flipper-plugin-react-navigation/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p>
+
+> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+<!-- tabs:start -->
+
+#### **npm**
+
+```bash
+npm install flipper-plugin-react-navigation@6.0.26
+```
+
+#### **yarn**
+
+```bash
+yarn add flipper-plugin-react-navigation@6.0.26
+```
+
+此库是flipper插件库，需配合flipper App使用。下面的代码展示了这个库的基本使用场景，更多详情请参考[使用教程](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation)：
+
+编辑 `~/.flipper/config.json` (当 flipper 处于关闭状态)
+```js
+{
+  "pluginPaths": ["/path/to/react-navigation/packages"]
+}
+```
+然后在 `flipper-plugin-react-navigation` 里运行 `yarn watch`
+
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/flipper-plugin-react-navigation/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-navigation-core.md b/zh-cn/react-navigation-core.md
new file mode 100644
index 00000000..ca164978
--- /dev/null
+++ b/zh-cn/react-navigation-core.md
@@ -0,0 +1,129 @@
+> 模板版本：v0.2.1
+
+<p align="center">
+  <h1 align="center"> <code>@react-navigation/core</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-navigation/react-navigation/tree/6.x/packages/core">
+        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
+    </a>
+    <a href="https://github.com/react-navigation/react-navigation/blob/6.x/packages/core/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p>
+
+> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/core)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+<!-- tabs:start -->
+
+#### **npm**
+
+```bash
+npm install @react-navigation/core@6.4.16
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-navigation/core@6.4.16
+```
+
+[!TIP] 如果要体验全部demo效果，还需要安装以下依赖：
+```bash
+npm install @react-navigation/native@6.1.17
+npm install @react-navigation/stack@6.3.29
+```
+
+<!-- tabs:end -->
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import * as React from 'react';
+import { Button, View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/core';
+
+function MyBackButton() {
+    const navigation = useNavigation();
+
+    return (
+        <Button
+            title="Back"
+            onPress={() => {
+                navigation.goBack();
+            }}
+        />
+    );
+}
+
+function HomeScreen({ navigation: { navigate } }) {
+    return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text>This is the home screen of the app</Text>
+            <Button title="Go to Profile" onPress={() => navigate('Profile')} />
+        </View>
+    );
+}
+
+function ProfileScreen() {
+    return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Text>Profile Screen</Text>
+            <MyBackButton />
+        </View>
+    );
+}
+
+const Stack = createStackNavigator();
+
+function App() {
+    return (
+        <NavigationContainer>
+            <Stack.Navigator initialRouteName="Home">
+                <Stack.Screen name="Home" component={HomeScreen} />
+                <Stack.Screen name="Profile" component={ProfileScreen} />
+            </Stack.Navigator>
+        </NavigationContainer>
+    );
+}
+
+export default App;
+
+```
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
+
+
+## 静态方法
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+以下方法已验证，更多使用详情请查看 [react-navigation 的文档介绍](https://reactnavigation.org/docs/getting-started/)
+
+| Name          | Description                                                                      | Type     | Required | Platform | HarmonyOS Support |
+| ------------- | -------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| useNavigation | 可访问navigation对象，当在组件中不能直接获取navigation属性时，可使用此方法来代替 | function | no       | all      | yes               |
+| useRoute      | 可访问route对象，当在组件中不能直接获取route属性时，可使用此方法来代替           | function | no       | all      | yes               |
+
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/core/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-navigation-devtools.md b/zh-cn/react-navigation-devtools.md
new file mode 100644
index 00000000..76dc64a4
--- /dev/null
+++ b/zh-cn/react-navigation-devtools.md
@@ -0,0 +1,74 @@
+> 模板版本：v0.2.1
+
+<p align="center">
+  <h1 align="center"> <code>@react-navigation/devtools</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-navigation/react-navigation/tree/6.x/packages/devtools">
+        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
+    </a>
+    <a href="https://github.com/react-navigation/react-navigation/blob/6.x/packages/devtools/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p>
+
+> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/devtools)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+<!-- tabs:start -->
+
+#### **npm**
+
+```bash
+npm install @react-navigation/devtools@6.0.26
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-navigation/devtools@6.0.26
+```
+
+<!-- tabs:end -->
+
+下面的代码展示了这个库的基本使用场景，更多请参考[官方文档](https://reactnavigation.org/docs/devtools/#usereduxdevtoolsextension)：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import * as React from 'react';
+import {
+  NavigationContainer,
+  useNavigationContainerRef,
+} from '@react-navigation/native';
+import { useReduxDevToolsExtension } from '@react-navigation/devtools';
+
+export default function App() {
+  const navigationRef = useNavigationContainerRef();
+
+  useReduxDevToolsExtension(navigationRef);
+
+  return (
+    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
+  );
+}
+```
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/devtools/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-navigation-material-bottom-tabs.md b/zh-cn/react-navigation-material-bottom-tabs.md
new file mode 100644
index 00000000..65ffac66
--- /dev/null
+++ b/zh-cn/react-navigation-material-bottom-tabs.md
@@ -0,0 +1,139 @@
+> 模板版本：v0.2.1
+
+<p align="center">
+  <h1 align="center"> <code>@react-navigation/material-bottom-tabs</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-navigation/react-navigation/tree/6.x/packages/material-bottom-tabs">
+        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
+    </a>
+    <a href="https://github.com/react-navigation/react-navigation/blob/6.x/packages/material-bottom-tabs/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p>
+
+> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/material-bottom-tabs)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)，并下载react-native-safe-area-context适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+<!-- tabs:start -->
+
+#### **npm**
+
+```bash
+npm install @react-navigation/material-bottom-tabs@6.2.28
+npm install @react-native-oh-tpl/react-native-safe-area-context@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-navigation/material-bottom-tabs@6.2.28
+yarn add @react-native-oh-tpl/react-native-safe-area-context@file:#
+```
+
+<!-- tabs:end -->
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+import { View, Text } from 'react-native'
+import { NavigationContainer } from '@react-navigation/native';
+import * as React from 'react';
+
+const Tab = createMaterialBottomTabNavigator();
+
+
+function HomeScreen() {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Home Screen</Text>
+        </View>
+    );
+}
+
+
+function SettingsScreen() {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Settings Screen</Text>
+        </View>
+    );
+}
+
+
+export function NavigationMaterialBottomTabs() {
+    return (
+        <NavigationContainer>
+            <Tab.Navigator >
+                <Tab.Screen name="Home" component={HomeScreen} />
+                <Tab.Screen name="Settings" component={SettingsScreen} />
+            </Tab.Navigator>
+        </NavigationContainer>
+    );
+}   
+
+```
+
+## Link
+
+本库鸿蒙侧实现依赖@react-native-oh-library/react-native-safe-area-context 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+
+如未引入请参照[@react-native-oh-library/react-native-safe-area-context 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-safe-area-context.md#link)进行引入
+
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+以下属性已验证，更多属性详情请查看 [@react-navigation/material-bottom-tabs 的文档介绍](https://reactnavigation.org/docs/material-bottom-tab-navigator)
+
+**Tab.Navigator**
+
+| Name             | Description                           | Type      | Required | Platform | HarmonyOS Support |
+| ---------------- | ------------------------------------- | --------- | -------- | -------- | ----------------- |
+| initialRouteName | 默认路由名字                          | string    | no       | all      | yes               |
+| screenOptions    | 用于navigator的screens属性            | object    | no       | all      | yes               |
+| inactiveColor    | 自定义未激活的tab页的图标和标签的颜色 | string    | no       | all      | yes               |
+| activeColor      | 自定义激活的tab页的图标和标签的颜色   | string    | no       | all      | yes               |
+| barStyle         | 底部导航栏的样式                      | ViewStyle | no       | all      | yes               |
+
+
+**Tab.Screen 的 Options**
+
+| Name        | Description                                                   | Type                  | Required | Platform | HarmonyOS Support |
+| ----------- | ------------------------------------------------------------- | --------------------- | -------- | -------- | ----------------- |
+| title       | 页面标题                                                      | string                | no       | all      | yes               |
+| tabBarIcon  | tabBar图标                                                    | React.Node            | no       | all      | yes               |
+| tabBarColor | 激活页的tabBar颜色                                            | string                | no       | all      | yes               |
+| tabBarLabel | tabBar标题，当未设置时，title属性生效                         | string                | no       | all      | yes               |
+| tabBarBadge | 显示在tabIcon上的徽章，为true显示原点，string或number显示文字 | boolean,number,string | no       | all      | yes               |
+
+
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/material-bottom-tabs/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-navigation-material-top-tabs.md b/zh-cn/react-navigation-material-top-tabs.md
new file mode 100644
index 00000000..eca3c73d
--- /dev/null
+++ b/zh-cn/react-navigation-material-top-tabs.md
@@ -0,0 +1,136 @@
+> 模板版本：v0.2.1
+
+<p align="center">
+  <h1 align="center"> <code>@react-navigation/material-top-tabs</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-navigation/react-navigation/tree/6.x/packages/material-top-tabs">
+        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
+    </a>
+    <a href="https://github.com/react-navigation/react-navigation/blob/6.x/packages/material-top-tabs/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p>
+
+> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/material-top-tabs)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-tab-view Releases](https://github.com/react-native-oh-library/react-navigation/releases)，并下载@react-native-oh-tpl/react-native-tab-view适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+<!-- tabs:start -->
+
+#### **npm**
+
+```bash
+npm install @react-navigation/material-top-tabs@@6.6.13
+npm install @react-native-oh-tpl/react-native-tab-view@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-navigation/material-top-tabs@@6.6.13
+yarn add @react-native-oh-tpl/react-native-tab-view@file:#
+```
+
+<!-- tabs:end -->
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import { View, Text } from 'react-native'
+import { NavigationContainer } from '@react-navigation/native';
+import * as React from 'react';
+
+const Tab = createMaterialTopTabNavigator();
+
+
+function HomeScreen() {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Home Screen</Text>
+        </View>
+    );
+}
+
+
+function SettingsScreen() {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Settings Screen</Text>
+        </View>
+    );
+}
+
+
+export function NavigationMaterialTopTabs() {
+    return (
+        <NavigationContainer>
+            <Tab.Navigator >
+                <Tab.Screen name="Home" component={HomeScreen} options={{title:'家'}}/>
+                <Tab.Screen name="Settings" component={SettingsScreen} options={{title:'设置'}}/>
+            </Tab.Navigator>
+        </NavigationContainer>
+    );
+}
+
+```
+
+## Link
+
+本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-tab-view 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+
+如未引入请参照[@react-native-oh-tpl/react-native-tab-view 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-tab-view.md#link)进行引入
+
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+以下属性已验证，更多属性详情请查看 [@react-navigation/material-top-tabs 的文档介绍](https://reactnavigation.org/docs/material-top-tab-navigator)
+
+**Tab.Navigator**
+| Name             | Description                                       | Type       | Required | Platform | HarmonyOS Support |
+| ---------------- | ------------------------------------------------- | ---------- | -------- | -------- | ----------------- |
+| initialRouteName | 默认路由名字                                      | string     | no       | all      | yes               |
+| screenOptions    | 用于navigator的screens属性                        | object     | no       | all      | yes               |
+| tabBarPosition   | tabBar的位置，可选值为'top'和'bottom',默认为'top' | string     | no       | all      | yes               |
+| tabBar           | 自定义tabBar                                      | React.Node | no       | all      | yes               |
+
+
+**Tab.Screen 的 Options**
+| Name            | Description                           | Type       | Required | Platform | HarmonyOS Support |
+| --------------- | ------------------------------------- | ---------- | -------- | -------- | ----------------- |
+| title           | 页面标题                              | string     | no       | all      | yes               |
+| tabBarLabel     | tabBar标题，当未设置时，title属性生效 | string     | no       | all      | yes               |
+| tabBarShowLabel | 是否展示tabBar label,默认为false      | boolean    | no       | all      | yes               |
+| tabBarIcon      | tabBar图标                            | React.Node | no       | all      | yes               |
+| tabBarShowIcon  | 是否展示tabBar图标,默认为false        | boolean    | no       | all      | yes               |
+
+
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/material-top-tabs/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-navigation-routers.md b/zh-cn/react-navigation-routers.md
new file mode 100644
index 00000000..7d0e1cba
--- /dev/null
+++ b/zh-cn/react-navigation-routers.md
@@ -0,0 +1,149 @@
+> 模板版本：v0.2.1
+
+<p align="center">
+  <h1 align="center"> <code>@react-navigation/routers</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-navigation/react-navigation/tree/6.x/packages/routers">
+        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
+    </a>
+    <a href="https://github.com/react-navigation/react-navigation/blob/6.x/packages/routers/LICENSE">
+        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
+    </a>
+</p>
+
+> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/routers)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+<!-- tabs:start -->
+
+#### **npm**
+
+```bash
+npm install @react-navigation/routers@6.1.19
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-navigation/routers@6.1.19
+```
+
+[!TIP] 如果要体验全部demo效果，还需要安装以下依赖：
+```bash
+npm install @react-navigation/core@6.4.16
+npm install @react-navigation/native@6.1.17
+npm install @react-navigation/stack@6.3.29
+```
+
+<!-- tabs:end -->
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
+import {
+    createNavigatorFactory,
+    useNavigationBuilder,
+} from '@react-navigation/core';
+import { StackRouter } from '@react-navigation/routers';
+import { StackView } from '@react-navigation/stack'
+import { NavigationContainer } from '@react-navigation/native'
+
+
+function StackNavigator({ initialRouteName, children, ...rest }) {
+    const { state, navigation, descriptors, NavigationContent } =
+        useNavigationBuilder(StackRouter, {
+            initialRouteName,
+            children,
+        });
+
+    return (
+        <NavigationContent>
+            <StackView
+                state={state}
+                navigation={navigation}
+                descriptors={descriptors}
+                
+                {...rest}
+            />
+        </NavigationContent>
+    );
+}
+
+const Stack = createNavigatorFactory(StackNavigator)();
+
+
+function HomeScreen({ navigation }) {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Home!</Text>
+            <Button
+                title="Go to Settings"
+                onPress={() => navigation.navigate('Settings')}
+            />
+        </View>
+    );
+}
+
+function SettingsScreen({ navigation }) {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Settings!</Text>
+            <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+        </View>
+    );
+}
+
+
+export default function Apps() {
+    return (
+        <NavigationContainer>
+            <Stack.Navigator>
+                <Stack.Screen name="Home" component={HomeScreen} />
+                <Stack.Screen name="Settings" component={SettingsScreen} />
+            </Stack.Navigator>
+        </NavigationContainer>
+    );
+}
+```
+
+
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;
+
+
+## 静态方法
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+以下方法已验证，更多使用详情请查看 [react-navigation 的文档介绍](https://reactnavigation.org/docs/getting-started/)
+
+| Name         | Description    | Type     | Required | Platform | HarmonyOS Support |
+| ------------ | -------------- | -------- | -------- | -------- | ----------------- |
+| StackRouter  | 内建stack路由  | function | no       | all      | yes               |
+| TabRouter    | 内建tab路由    | function | no       | all      | yes               |
+| DrawerRouter | 内建drawer路由 | function | no       | all      | yes               |
+
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/routers/LICENSE) ，请自由地享受和参与开源。
-- 
Gitee