From cb4285aa4f2fa7fb3adc9b80d012e3063335c654 Mon Sep 17 00:00:00 2001
From: zhyx2 <zhuyongxiang2@h-partners.com>
Date: Fri, 21 Nov 2025 19:42:54 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:#ID7XEN]=20=E6=96=B0=E5=A2=9Ere?=
 =?UTF-8?q?act-native-router-flux=E4=B8=AD=E3=80=81=E8=8B=B1=E6=96=87?=
 =?UTF-8?q?=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

---
 en/react-native-router-flux.md    | 427 +++++++++++++++++++++++++++++
 zh-cn/react-native-router-flux.md | 430 ++++++++++++++++++++++++++++++
 2 files changed, 857 insertions(+)
 create mode 100644 en/react-native-router-flux.md
 create mode 100644 zh-cn/react-native-router-flux.md

diff --git a/en/react-native-router-flux.md b/en/react-native-router-flux.md
new file mode 100644
index 000000000..f6ff56aef
--- /dev/null
+++ b/en/react-native-router-flux.md
@@ -0,0 +1,427 @@
+> version：v0.3.0
+
+<p align="center">
+  <h1 align="center"> <code>react-native-router-flux</code> </h1>
+</p>
+
+
+> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-router-flux)
+
+Please visit the Releases page of the third-party library to check the corresponding version information:
+
+| Version  | Releases info                                                      | Support RN version |
+|---------|-----------------------------------------------------------------------------------------------------------------------------|-----------|
+| 4.3.2   | [@react-native-ohos/react-native-router-flux Releases](https://github.com/react-native-oh-library/react-native-router-flux/releases) | 0.72/0.77 |
+
+## 1. install and use
+### 0.72
+The implementation of this library depends on the native  code from @react-native-oh-tpl/react-native-reanimated and @react-native-oh-tpl/react-native-gesture-handler and @react-native-oh-tpl/react-native-safe-area-context. 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.
+If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) and [@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md) and [@react-native-oh-tpl/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md)  to add it to your project.
+
+### 0.77
+The implementation of this library depends on the native  code from @react-native-ohos/react-native-reanimated and @react-native-ohos/react-native-gesture-handler and @react-native-ohos/react-native-safe-area-context. 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.
+If it is not included, follow the guide provided in [@react-native-ohos/react-native-reanimated](/zh-cn/react-native-reanimated.md) and [@react-native-ohos/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md) and [@react-native-ohos/react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md)  to add it to your project.
+
+into project and input command：
+
+#### **npm**
+
+```bash
+npm install @react-native-ohos/react-native-router-flux
+
+# 0.72
+npm install react-native-screens@3.34.0
+npm install @react-navigation/drawer@^6.7.2
+npm install @react-navigation/bottom-tabs@^6.6.1
+npm install @react-navigation/stack@6.3.0
+
+# 0.77
+npm install react-native-screens@4.8.1
+npm install @react-navigation/drawer@^7.1.17
+npm install @react-navigation/bottom-tabs@^7.1.0
+npm install @react-navigation/stack@7.2.10
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-ohos/react-native-router-flux
+
+# 0.72
+yarn add @react-native-oh-tpl/react-native-screens@^3.34.0-rc.1
+yarn add @react-navigation/drawer@^6.7.2
+yarn add @react-navigation/bottom-tabs@^6.6.1
+yarn add @react-navigation/stack@6.3.0
+
+# 0.77
+yarn add @react-native-ohos/react-native-screens@4.8.1-rc.4
+yarn add @react-navigation/drawer@^7.1.17
+yarn add @react-navigation/bottom-tabs@^7.1.0
+yarn add @react-navigation/stack@7.2.10
+```
+
+The following code shows the basic use scenario of the repository:
+
+> [!WARNING] The name of the imported repository remains unchanged.
+
+```js
+import React from 'react';
+import { Router, Stack, Scene, Actions } from 'react-native-router-flux';
+import { View, Text, Button, StyleSheet } from 'react-native';
+
+const HomeScreen = () => (
+    <View style={styles.container}>
+        <Text style={styles.title}>home</Text>
+        <Text style={styles.description}>welcome use react-native-router-flux</Text>
+    
+        <View style={styles.buttonContainer}>
+            <Button
+                title="jump det"
+                onPress={() => Actions.detail()}
+                />
+            <Button
+                title="open user"
+                onPress={() => Actions.user()}
+                />
+            <Button
+                title="open set）"
+                onPress={() => Actions.settings()}
+                />
+        </View>
+    </View>
+);
+
+const DetailScreen = () => (
+    <View style={styles.container}>
+        <Text style={styles.title}>detail</Text>
+        <Text style={styles.description}>detail content</Text>
+    
+        <View style={styles.buttonContainer}>
+            <Button
+                title="backhome"
+                onPress={() => Actions.pop()}
+                />
+            <Button
+                title="user"
+                onPress={() => Actions.user()}
+                />
+        </View>
+    </View>
+);
+
+const UserScreen = (props) => (
+    <View style={styles.container}>
+        <Text style={styles.title}>user page</Text>
+        <Text style={styles.description}>
+            userID: {props.userId || 'no par'}
+        </Text>
+    
+        <View style={styles.buttonContainer}>
+            <Button
+                title="back"
+                onPress={() => Actions.pop()}
+                />
+            <Button
+                title="jumppar"
+                onPress={() => Actions.user({ userId: '12345' })}
+                />
+            <Button
+                title="home"
+                onPress={() => Actions.reset('home')}
+                />
+        </View>
+    </View>
+);
+
+const SettingsScreen = () => (
+    <View style={styles.container}>
+        <Text style={styles.title}>set</Text>
+        <Text style={styles.description}>model page</Text>
+    
+        <View style={styles.buttonContainer}>
+            <Button
+                title="close"
+                onPress={() => Actions.pop()}
+                />
+        </View>
+    </View>
+);
+
+const App = () => {
+    return (
+        <Router>
+            <Stack key="root">
+          
+                <Scene
+                    key="home"
+                    component={HomeScreen}
+                    title="home"
+                    initial />
+        
+               
+                <Scene
+                    key="detail"
+                    component={DetailScreen}
+                    title="deta" />
+        
+                <Scene
+                    key="user"
+                    component={UserScreen}
+                    title="userinfo" />
+        
+        
+                <Scene
+                    key="settings"
+                    component={SettingsScreen}
+                    title="set"
+                    modal />
+            </Stack>
+        </Router>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        backgroundColor: '#f5f5f5',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 10,
+    },
+    description: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginBottom: 30,
+        color: '#666',
+    },
+    buttonContainer: {
+        width: '100%',
+        gap: 10,
+    },
+});
+
+export default App;
+```
+
+## 2. Manual Link
+
+This step provides guidance for manually configuring native dependencies.
+
+Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
+
+### 2.1. Overrides RN SDK
+
+To ensure the project relies on the same version of the RN SDK, you need to add an `overrides` field in the project's root `oh-package.json5` file, specifying the RN SDK version to be used. The replacement version can be a specific version number, a semver range, or a locally available HAR package or source directory.
+
+For more information about the purpose of this field, please refer to the [official documentation](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#en-us_topic_0000001792256137_overrides).
+
+```json
+{
+  "overrides": {
+    "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory
+  }
+}
+```
+
+### 2.2. Running
+
+Click the `sync` button in the upper right corner.
+
+Alternatively, run the following instruction on the terminal:
+
+```bash
+cd entry
+ohpm install
+```
+
+Then build and run the code.
+
+## 3. Constraints
+
+### 3.1. Compatibility
+
+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:
+| Version  | Releases info                                                      | Support RN version |
+| ----------- | ------------------------------------------------------------ | ---------- |
+| 4.3.2   | [@react-native-ohos/react-native-router-flux Releases](https://github.com/react-native-oh-library/react-native-router-flux/releases) | 0.72/0.77 |
+
+## 4. Properties
+
+> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
+
+> [!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.
+
+### 1. Router 
+
+Router manages page navigation and transition effects for the entire application.
+
+**Router properties：**
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| sceneStyle | Style of the scene container | style | no | iOS/Android | yes |
+| backAndroidHandler | Custom handler for Android back button | function | no | Android | no |
+| wrapBy | Higher-order component wrapper function for adding extra wrappers to each scene | function | no | iOS/Android | yes |
+| scenes | Define routing scene configuration (route table) | object | no | iOS/Android | yes |
+| createReducer | Create custom navigation reducer | function | no | iOS/Android | yes |
+| onStateChange | Callback function when navigation state changes | function | no | iOS/Android | yes |
+| getSceneStyle | Function to dynamically get scene style | function | no | iOS/Android | yes |
+| uriPrefix | Set URI prefix for deep links | string | no | Android | no |
+| onDeepLink | Define routing scene configuration (route table) | function | no | Android | no |
+
+### 2. Scene
+
+Defines the core interface for page route configuration.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| key | Unique identifier for the scene | string | yes | iOS/Android | yes |
+| component | React component corresponding to the scene | element | no | iOS/Android | yes |
+| back | Whether to use as back page | boolean | no | iOS/Android | yes |
+| init | Whether to initialize the scene | boolean | no | iOS/Android | yes |
+| clone | Whether to clone the scene | boolean | no | iOS/Android | yes |
+| contentComponent | Content component | element | no | iOS/Android | yes |
+| backButtonImage | Back button image path | string | no | iOS/Android | yes |
+| backButtonTintColor | Back button color | string | no | iOS/Android | yes |
+| drawer | Whether to use as drawer menu | boolean | no | iOS/Android | yes |
+| failure | Callback function or scene key when navigation fails | function\| string | no | Android | no |
+| headerBackTitle | Header back button title | string | no | Android | no |
+| headerMode | Header mode | string | no | Android | no |
+| hideNavBar | Whether to hide navigation bar | boolean | no | iOS/Android | yes |
+| hideTabBar | Whether to hide tab bar | boolean | no | iOS/Android | yes |
+| hideBackImage | Whether to hide back image | boolean | no | iOS/Android | yes |
+| initial | Whether to use as initial scene | boolean | no | iOS/Android | yes |
+| leftButtonImage | Left button image | Image | no | iOS/Android | yes |
+| modal | Whether to display in modal form | boolean | no | iOS/Android | yes |
+| navigationBarTitleImage | Navigation bar title image | Image | no | iOS/Android | yes |
+| navigationBarTitleImageStyle | Navigation bar title image style | style | no | iOS/Android | yes |
+| navTransparent | Whether navigation bar is transparent | boolean | no | iOS/Android | yes |
+| on | General event handler function | function | no | iOS/Android | yes |
+| onEnter | Callback function when entering the scene | function | no | iOS/Android | yes |
+| onExit | Callback function when exiting the scene | function | no | iOS/Android | yes |
+| onLeft | Left button click event | function | no | iOS/Android | yes |
+| onRight | Right button click event | function | no | iOS/Android | yes |
+| renderTitle | Custom title rendering component | element | no | iOS/Android | yes |
+| renderLeftButton | Custom left button rendering component | element | no | iOS/Android | yes |
+| renderRightButton | Custom right button rendering component | element | no | iOS/Android | yes |
+| renderBackButton | Custom back button rendering component | element | no | Android | no |
+| rightTitle | Right button title | string | no | iOS/Android | yes |
+| rightButtonImage | Right button image | Image \| null | no | iOS/Android | yes |
+| rightButtonTextStyle | Right button text style | style | no | iOS/Android | yes |
+| success | Callback function or scene key when navigation succeeds | function\| string | no | Android | no |
+| tabs | Whether to use as tab container | boolean | no | iOS/Android | yes |
+| title | Scene title | function \| string | no | iOS/Android | yes |
+| titleStyle | Title style | style | no | iOS/Android | yes |
+| type | Navigation action type | string | no | iOS/Android | yes |
+| [name: string] | Other custom properties that will be passed to the scene component | object | no | iOS/Android | yes |
+
+
+### 3. Tabs 
+Defines all configuration options for the tab container.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| wrap | Whether to wrap tabs | boolean | no | iOS/Android | yes |
+| activeBackgroundColor | Background color in active state | string | no | iOS/Android | yes |
+| activeTintColor | Text color in active state | string | no | iOS/Android | yes |
+| inactiveBackgroundColor | Background color in inactive state | string | no | iOS/Android | yes |
+| inactiveTintColor | Text color in inactive state | string | no | iOS/Android | yes |
+| labelStyle | Label text style | style | no | iOS/Android | yes |
+| lazy | Whether to lazy load tabs | boolean | no | iOS/Android | yes |
+| hideNavBar | Whether to hide navigation bar | boolean | no | iOS/Android | yes |
+| hideTabBar | Whether to hide tab bar | boolean | no | iOS/Android | yes |
+| tabBarComponent | Custom tab bar component | element | no | iOS/Android | yes |
+| tabBarPosition | Tab bar position | string | no | iOS/Android | yes |
+| tabBarStyle | Tab bar style | style | no | iOS/Android | yes |
+| tabStyle | Single tab style | style | no | iOS/Android | yes |
+| indicatorStyle | Indicator style | style | no | iOS/Android | yes |
+| showLabel | Whether to show label text | boolean | no | iOS/Android | yes |
+| swipeEnabled | Whether swipe switching is supported | boolean | no | iOS/Android | yes |
+| tabBarOnPress | Tab bar press event handler | function | no | iOS/Android | yes |
+| backToInitial | Whether to return to initial tab when going back | boolean | no | iOS/Android | yes |
+
+### 4. Drawer
+
+Defines the configuration options for the drawer menu component.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| drawerImage | Drawer button image | Image | no | iOS/Android | yes |
+| drawerIcon | Drawer button icon, can be a React element or component | function| element | no | iOS/Android | yes |
+| drawerPosition | Drawer position | string | no | iOS/Android | yes |
+
+### 5. Stack 
+
+Defines all configuration options for the stack navigator.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| navigationBarStyle | Navigation bar style | style | no | iOS/Android | yes |
+| icon | Icon | object | no | iOS/Android | yes |
+| tintColor | Tint color | string | no | iOS/Android | yes |
+| hideNavBar | Whether to hide navigation bar | boolean | no | iOS/Android | yes |
+| hideTabBar | Whether to hide tab bar | boolean | no | iOS/Android | yes |
+| title | Title | string | no | iOS/Android | yes |
+| lightbox | Whether to display in lightbox mode | boolean | no | iOS/Android | yes |
+| tabs | Whether to use as tabs | boolean | no | iOS/Android | yes |
+| initial | Whether to use as initial stack | boolean | no | iOS/Android | yes |
+| titleStyle | Title style | style | no | iOS/Android | yes |
+| type | Type | string | no | iOS/Android | yes |
+| navTransparent | Whether navigation bar is transparent | boolean | no | iOS/Android | yes |
+| renderer | Renderer | object | no | iOS/Android | yes |
+
+### 6. Actions 
+
+Defines all methods for navigation operations.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| currentScene | Current scene information | object | no | iOS/Android | yes |
+| jump | Jump to specified scene | function | no | iOS/Android | yes |
+| pop | Go back to previous scene | function | no | iOS/Android | yes |
+| popAndPush | Go back and push new scene | function | no | iOS/Android | yes |
+| popTo | Go back to specified scene | function | no | iOS/Android | yes |
+| push | Push new scene | function | no | iOS/Android | yes |
+| refresh | Refresh current scene | function| no | iOS/Android | yes |
+| replace | Replace current scene | function | no | iOS/Android | yes |
+| reset | Reset navigation stack to specified scene | function | no | iOS/Android | yes |
+| addRef | Add reference | function | no | iOS/Android | yes |
+| drawerOpen | Open drawer menu | object | no | iOS/Android | yes |
+| drawerClose | Close drawer menu | object | no | iOS/Android | yes |
+
+### 7. ActionConstShort - navigation action
+
+These constants are used to explicitly specify navigation behavior in route configuration and navigation operations, ensuring clarity and consistency in navigation logic.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| JUMP | Jump action type | string | no | iOS/Android | yes |
+| PUSH | Push action type | string | no | iOS/Android | yes |
+| PUSH_OR_POP | Push or pop action type | string | no | iOS/Android | yes |
+| REPLACE | Replace action type | string | no | iOS/Android | yes |
+| BACK | Back action type | string | no | iOS/Android | yes |
+| BACK_ACTION | Back action | string | no | iOS/Android | yes |
+| POP_TO | Pop to specified scene action type | string | no | iOS/Android | yes |
+| REFRESH | Refresh action type | string | no | iOS/Android | yes |
+| RESET | Reset action type | string | no | iOS/Android | yes |
+| FOCUS | Focus action type | string | no | iOS/Android | yes |
+| BLUR | Blur action type | string | no | iOS/Android | yes |
+| ANDROID_BACK | Android back button action type | string | no | Android | no |
+
+## 7. Known Issues
+
+## 8. Others
+
+## 9. License
+
+This project is licensed under [The MIT License (MIT)](https://github.com/aksonov/react-native-router-flux/blob/master/LICENSE).
+
diff --git a/zh-cn/react-native-router-flux.md b/zh-cn/react-native-router-flux.md
new file mode 100644
index 000000000..59f39718e
--- /dev/null
+++ b/zh-cn/react-native-router-flux.md
@@ -0,0 +1,430 @@
+> 模板版本：v0.3.0
+
+<p align="center">
+  <h1 align="center"> <code>react-native-router-flux</code> </h1>
+</p>
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-router-flux)
+
+请到三方库的 Releases 发布地址查看配套的版本信息：
+
+| 三方库版本 | 发布信息                                                                                                                        | 支持RN版本    |
+|---------|-----------------------------------------------------------------------------------------------------------------------------|-----------|
+| 4.3.2   | [@react-native-ohos/react-native-router-flux Releases](https://github.com/react-native-oh-library/react-native-router-flux/releases) | 0.72/0.77 |
+
+## 1. 安装与使用
+### 0.72
+本库实现依赖@react-native-oh-tpl/react-native-reanimated、 @react-native-oh-tpl/react-native-gesture-handler、@react-native-oh-tpl/react-native-safe-area-context的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+如未引入请参照[@react-native-oh-tpl/react-native-reanimated 文档](/zh-cn/react-native-reanimated.md)、[@react-native-oh-tpl/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-safe-area-context 文档](/zh-cn/react-native-safe-area-context.md)进行引入
+
+
+### 0.77
+本库实现依赖@react-native-ohos/react-native-reanimated、 @react-native-ohos/react-native-gesture-handler、@react-native-ohos/react-native-safe-area-context的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+如未引入请参照[@react-native-ohos/react-native-reanimated 文档](/zh-cn/react-native-reanimated.md)、[@react-native-ohos/react-native-gesture-handler 文档](/zh-cn/react-native-gesture-handler.md)、[@react-native-ohos/react-native-safe-area-context 文档](/zh-cn/react-native-safe-area-context.md)进行引入
+
+进入到工程目录并输入以下命令：
+
+#### **npm**
+
+```bash
+npm install @react-native-ohos/react-native-router-flux
+
+# 0.72
+npm install react-native-screens@3.34.0
+npm install @react-navigation/drawer@^6.7.2
+npm install @react-navigation/bottom-tabs@^6.6.1
+npm install @react-navigation/stack@6.3.0
+
+# 0.77
+npm install react-native-screens@4.8.1
+npm install @react-navigation/drawer@^7.1.17
+npm install @react-navigation/bottom-tabs@^7.1.0
+npm install @react-navigation/stack@7.2.10
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-ohos/react-native-router-flux
+
+# 0.72
+yarn add @react-native-oh-tpl/react-native-screens@^3.34.0-rc.1
+yarn add @react-navigation/drawer@^6.7.2
+yarn add @react-navigation/bottom-tabs@^6.6.1
+yarn add @react-navigation/stack@6.3.0
+
+# 0.77
+yarn add @react-native-ohos/react-native-screens@4.8.1-rc.4
+yarn add @react-navigation/drawer@^7.1.17
+yarn add @react-navigation/bottom-tabs@^7.1.0
+yarn add @react-navigation/stack@7.2.10
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import React from 'react';
+import { Router, Stack, Scene, Actions } from 'react-native-router-flux';
+import { View, Text, Button, StyleSheet } from 'react-native';
+
+const HomeScreen = () => (
+    <View style={styles.container}>
+        <Text style={styles.title}>首页</Text>
+        <Text style={styles.description}>欢迎使用 react-native-router-flux</Text>
+    
+        <View style={styles.buttonContainer}>
+            <Button
+                title="跳转到详情页"
+                onPress={() => Actions.detail()}
+                />
+            <Button
+                title="打开用户页面"
+                onPress={() => Actions.user()}
+                />
+            <Button
+                title="打开设置（模态框）"
+                onPress={() => Actions.settings()}
+                />
+        </View>
+    </View>
+);
+
+const DetailScreen = () => (
+    <View style={styles.container}>
+        <Text style={styles.title}>详情页面</Text>
+        <Text style={styles.description}>这是详情页的内容</Text>
+    
+        <View style={styles.buttonContainer}>
+            <Button
+                title="返回首页"
+                onPress={() => Actions.pop()}
+                />
+            <Button
+                title="跳转到用户页"
+                onPress={() => Actions.user()}
+                />
+        </View>
+    </View>
+);
+
+const UserScreen = (props) => (
+    <View style={styles.container}>
+        <Text style={styles.title}>用户页面</Text>
+        <Text style={styles.description}>
+            用户ID: {props.userId || '未传递参数'}
+        </Text>
+    
+        <View style={styles.buttonContainer}>
+            <Button
+                title="返回"
+                onPress={() => Actions.pop()}
+                />
+            <Button
+                title="带参数跳转"
+                onPress={() => Actions.user({ userId: '12345' })}
+                />
+            <Button
+                title="重置到首页"
+                onPress={() => Actions.reset('home')}
+                />
+        </View>
+    </View>
+);
+
+const SettingsScreen = () => (
+    <View style={styles.container}>
+        <Text style={styles.title}>设置</Text>
+        <Text style={styles.description}>这是模态框页面</Text>
+    
+        <View style={styles.buttonContainer}>
+            <Button
+                title="关闭模态框"
+                onPress={() => Actions.pop()}
+                />
+        </View>
+    </View>
+);
+
+const App = () => {
+    return (
+        <Router>
+            <Stack key="root">
+                {/* 首页 */}
+                <Scene
+                    key="home"
+                    component={HomeScreen}
+                    title="首页"
+                    initial />
+        
+                {/* 详情页 */}
+                <Scene
+                    key="detail"
+                    component={DetailScreen}
+                    title="详情页" />
+        
+                {/* 用户页 */}
+                <Scene
+                    key="user"
+                    component={UserScreen}
+                    title="用户信息" />
+        
+                {/* 设置页（模态框） */}
+                <Scene
+                    key="settings"
+                    component={SettingsScreen}
+                    title="设置"
+                    modal />
+            </Stack>                                                
+        </Router>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        backgroundColor: '#f5f5f5',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 10,
+    },
+    description: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginBottom: 30,
+        color: '#666',
+    },
+    buttonContainer: {
+        width: '100%',
+        gap: 10,
+    },
+});
+
+export default App;
+```
+
+## 2. Manual Link
+
+此步骤为手动配置原生依赖项的指导。
+
+首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。
+
+### 2.1. Overrides RN SDK
+
+为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。
+
+关于该字段的作用请阅读[官方说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides)
+
+```json
+{
+  "overrides": {
+    "@rnoh/react-native-openharmony": "^0.72.38" // ohpm 在线版本
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
+  }
+}
+```
+
+### 2.2. 运行
+
+点击右上角的 `sync` 按钮
+
+或者在命令行终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 3. 约束与限制
+
+### 3.1. 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：
+| 三方库版本  | 发布信息                                                     | 支持RN版本 |
+| ----------- | ------------------------------------------------------------ | ---------- |
+| 4.3.2   | [@react-native-ohos/react-native-router-flux Releases](https://github.com/react-native-oh-library/react-native-router-flux/releases) | 0.72/0.77 |
+
+## 4. 属性
+
+> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+### 1. Router - 路由
+
+Router 管理整个应用的页面导航和转场效果。
+
+**Router属性：**
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| sceneStyle | 场景容器的样式 | style | no | iOS/Android | yes |
+| backAndroidHandler | Android 返回键自定义处理函数 | function | no | Android | no |
+| wrapBy | 高阶组件包装函数，用于给每个场景添加额外的包装 | function | no | iOS/Android | yes |
+| scenes | 定义路由场景配置（路由表） | object | no | iOS/Android | yes |
+| createReducer | 创建自定义的导航 reducer | function | no | iOS/Android | yes |
+| onStateChange | 导航状态变化时的回调函数 | function | no | iOS/Android | yes |
+| getSceneStyle |动态获取场景样式的函数 | function | no | iOS/Android | yes |
+| uriPrefix | 设置深度链接（Deep Link）的 URI 前缀 | string | no | Android | no |
+| onDeepLink | 定义路由场景配置（路由表） | function | no | Android | no |
+
+### 2. Scene - 场景
+
+定义页面路由配置的核心接口
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| key | 场景的唯一标识符 | string | yes | iOS/Android | yes |
+| component | 场景对应的React组件 | element | no | iOS/Android | yes |
+| back | 是否作为返回页面 | boolean | no | iOS/Android | yes |
+| init | 是否初始化场景 | boolean | no | iOS/Android | yes |
+| clone | 是否克隆场景 | boolean | no | iOS/Android | yes |
+| contentComponent | 内容组件 | element | no | iOS/Android | yes |
+| backButtonImage | 返回按钮图片路径 | string | no | iOS/Android | yes |
+| backButtonTintColor | 返回按钮颜色 | string | no | iOS/Android | yes |
+| drawer | 是否作为抽屉菜单 | boolean | no | iOS/Android | yes |
+| failure | 导航失败时的回调函数或场景key | function \| string | no | Android | no |
+| headerBackTitle | 头部返回按钮标题 | string | no | Android | no |
+| headerMode | 头部模式 | string | no | Android | no |
+| hideNavBar | 是否隐藏导航栏 | boolean | no | iOS/Android | yes |
+| hideTabBar | 是否隐藏标签栏 | boolean | no | iOS/Android | yes |
+| hideBackImage | 是否隐藏返回图片 | boolean | no | iOS/Android | yes |
+| initial | 是否作为初始场景 | boolean | no | iOS/Android | yes |
+| leftButtonImage | 左侧按钮图片 | Image | no | iOS/Android | yes |
+| modal | 是否以模态形式显示 | boolean | no | iOS/Android | yes |
+| navigationBarTitleImage | 导航栏标题图片 | Image | no | iOS/Android | yes |
+| navigationBarTitleImageStyle | 导航栏标题图片样式 | style | no | iOS/Android | yes |
+| navTransparent | 导航栏是否透明 | boolean | no | iOS/Android | yes |
+| on | 通用事件处理函数 | function | no | iOS/Android | yes |
+| onEnter | 进入场景时的回调函数 | function | no | iOS/Android | yes |
+| onExit | 退出场景时的回调函数 | function | no | iOS/Android | yes |
+| onLeft | 左侧按钮点击事件 | function | no | iOS/Android | yes |
+| onRight | 右侧按钮点击事件 | function | no | iOS/Android | yes |
+| renderTitle | 自定义标题渲染组件 | element | no | iOS/Android | yes |
+| renderLeftButton | 自定义左侧按钮渲染组件 | element | no | iOS/Android | yes |
+| renderRightButton | 自定义右侧按钮渲染组件 | element | no | iOS/Android | yes |
+| renderBackButton | 自定义返回按钮渲染组件 | element | no | Android | no |
+| rightTitle | 右侧按钮标题 | string | no | iOS/Android | yes |
+| rightButtonImage | 右侧按钮图片 | Image \| null | no | iOS/Android | yes |
+| rightButtonTextStyle | 右侧按钮文本样式 | style | no | iOS/Android | yes |
+| success | 导航成功时的回调函数或场景key | function \| string | no | Android | no |
+| tabs | 是否作为标签页容器 | boolean | no | iOS/Android | yes |
+| title | 场景标题 | function \| string | no | iOS/Android | yes |
+| titleStyle | 标题样式 | style | no | iOS/Android | yes |
+| type | 导航动作类型 | string | no | iOS/Android | yes |
+| [name: string] | 其他自定义属性，会传递给场景组件 | object | no | iOS/Android | yes |
+
+
+### 3. Tabs - 标签容器
+
+定义了 标签页容器的所有配置选项。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| wrap | 是否包装标签页 | boolean | no | iOS/Android | yes |
+| activeBackgroundColor | 激活状态的背景颜色 | string | no | iOS/Android | yes |
+| activeTintColor | 激活状态的文字颜色 | string | no | iOS/Android | yes |
+| inactiveBackgroundColor | 非激活状态的背景颜色 | string | no | iOS/Android | yes |
+| inactiveTintColor | 非激活状态的文字颜色 | string | no | iOS/Android | yes |
+| labelStyle | 标签文字样式 | style | no | iOS/Android | yes |
+| lazy | 是否懒加载标签页 | boolean | no | iOS/Android | yes |
+| hideNavBar | 是否隐藏导航栏 | boolean | no | iOS/Android | yes |
+| hideTabBar | 是否隐藏标签栏 | boolean | no | iOS/Android | yes |
+| tabBarComponent | 自定义标签栏组件 | element | no | iOS/Android | yes |
+| tabBarPosition | 标签栏位置 | string | no | iOS/Android | yes |
+| tabBarStyle | 标签栏样式 | style | no | iOS/Android | yes |
+| tabStyle | 单个标签样式 | style | no | iOS/Android | yes |
+| indicatorStyle | 指示器样式 | style | no | iOS/Android | yes |
+| showLabel | 是否显示标签文字 | boolean | no | iOS/Android | yes |
+| swipeEnabled | 是否支持滑动切换 | boolean | no | iOS/Android | yes |
+| tabBarOnPress | 标签栏按下事件处理函数 | function | no | iOS/Android | yes |
+| backToInitial | 返回时是否回到初始标签页 | boolean | no | iOS/Android | yes |
+
+### 4. Drawer - 抽屉
+
+定义了 抽屉菜单组件的配置选项。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| drawerImage | 抽屉按钮图片 | Image | no | iOS/Android | yes |
+| drawerIcon | 抽屉按钮图标，可以是React元素或组件 | element\| element | no | iOS/Android | yes |
+| drawerPosition | 抽屉位置 | string | no | iOS/Android | yes |
+
+### 5. Stack - 栈组件
+
+定义了 堆栈导航器的所有配置选项。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| navigationBarStyle | 导航栏样式 | style | no | iOS/Android | yes |
+| icon | 图标 | object | no | iOS/Android | yes |
+| tintColor | 色调颜色 | string | no | iOS/Android | yes |
+| hideNavBar | 是否隐藏导航栏 | boolean | no | iOS/Android | yes |
+| hideTabBar | 是否隐藏标签栏 | boolean | no | iOS/Android | yes |
+| title | 标题 | string | no | iOS/Android | yes |
+| lightbox | 是否以灯箱模式显示 | boolean | no | iOS/Android | yes |
+| tabs | 是否作为标签页 | boolean | no | iOS/Android | yes |
+| initial | 是否作为初始堆栈 | boolean | no | iOS/Android | yes |
+| titleStyle | 标题样式 | style | no | iOS/Android | yes |
+| type | 类型 | string | no | iOS/Android | yes |
+| navTransparent | 导航栏是否透明 | boolean | no | iOS/Android | yes |
+| renderer | 渲染器 | object | no | iOS/Android | yes |
+
+### 6. Actions - 导航类
+
+定义了 导航操作的所有方法。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| currentScene | 当前场景信息 | object | no | iOS/Android | yes |
+| jump | 跳转到指定场景 | function| no | iOS/Android | yes |
+| pop | 返回上一个场景 | function | no | iOS/Android | yes |
+| popAndPush | 返回并推入新场景 | function| no | iOS/Android | yes |
+| popTo | 返回到指定场景 | function| no | iOS/Android | yes |
+| push | 推入新场景 | function| no | iOS/Android | yes |
+| refresh | 刷新当前场景 | function| no | iOS/Android | yes |
+| replace | 替换当前场景 | function| no | iOS/Android | yes |
+| reset | 重置导航栈到指定场景 | function| no | iOS/Android | yes |
+| addRef | 添加引用 | function | no | iOS/Android | yes |
+| drawerOpen | 打开抽屉菜单 | object | no | iOS/Android | yes |
+| drawerClose | 关闭抽屉菜单 | object | no | iOS/Android | yes |
+
+### 7. ActionConstShort - 导航行为
+
+这些常量用于在路由配置和导航操作中明确指定导航行为，确保导航逻辑的清晰和一致。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ---- | -------- | -------- | ------------------ |
+| JUMP | 跳转动作类型 | string | no | iOS/Android | yes |
+| PUSH | 推入动作类型 | string | no | iOS/Android | yes |
+| PUSH_OR_POP | 推入或弹出动作类型 | string | no | iOS/Android | yes |
+| REPLACE | 替换动作类型 | string | no | iOS/Android | yes |
+| BACK | 返回动作类型 | string | no | iOS/Android | yes |
+| BACK_ACTION | 返回动作 | string | no | iOS/Android | yes |
+| POP_TO | 弹出到指定场景动作类型 | string | no | iOS/Android | yes |
+| REFRESH | 刷新动作类型 | string | no | iOS/Android | yes |
+| RESET | 重置动作类型 | string | no | iOS/Android | yes |
+| FOCUS | 获取焦点动作类型 | string | no | iOS/Android | yes |
+| BLUR | 失去焦点动作类型 | string | no | iOS/Android | yes |
+| ANDROID_BACK | Android返回键动作类型 | string | no | Android | no |
+
+## 7. 遗留问题
+
+## 8. 其他
+
+## 9. 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/aksonov/react-native-router-flux/blob/master/LICENSE) ，请自由地享受和参与开源。
+
-- 
Gitee