diff --git a/zh-cn/react-native-router-flux.md b/zh-cn/react-native-router-flux.md new file mode 100644 index 0000000000000000000000000000000000000000..20c73a705dc4c4ea4ccc8dfae06d07423098cb54 --- /dev/null +++ b/zh-cn/react-native-router-flux.md @@ -0,0 +1,185 @@ +> 模板版本:v0.2.2 + +

+

react-native-router-flux

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-router-flux) + +## 安装与使用 + +进入到工程目录并输入以下命令: + + + +#### **npm** + +```bash +npm install react-native-router-flux + +# 0.72 +npm install @react-native-oh-tpl/react-native-gesture-handler@^2.14.1-2.14.15 +npm install @react-native-oh-tpl/react-native-reanimated@^3.6.4-rc.1 +npm install @react-native-oh-tpl/react-native-safe-area-context@^4.7.4-0.2.0 + +npm install @react-native-oh-tpl/react-native-screens@^3.34.0-rc.1 +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-ohos/react-native-gesture-handler@2.23.2-rc.1 +npm install @react-native-ohos/react-native-reanimated@3.18.1-rc.1 +npm install @react-native-ohos/react-native-safe-area-contextt@5.1.1-rc.1 + +npm install @react-native-ohos/react-native-screens@4.8.1-rc.4 +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-router-flux + +# 0.72 +yarn add @react-native-oh-tpl/react-native-gesture-handler@^2.14.1-2.14.15 +yarn add @react-native-oh-tpl/react-native-reanimated@^3.6.4-rc.1 +yarn add @react-native-oh-tpl/react-native-safe-area-context@^4.7.4-0.2.0 + +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-gesture-handler@2.23.2-rc.1 +yarn add @react-native-ohos/react-native-reanimated@3.18.1-rc.1 +yarn add @react-native-ohos/react-native-safe-area-contextt@5.1.1-rc.1 + +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 +``` + + + +下面的代码展示了该库的基本使用场景: + +**Hello world** +从 react-native-router-flux 包中 import 组件即可使用 +``` +const App = () => ( + + + + + + + +); +``` +**按需加载** +使用单独 import 组件实现按需加载 +``` + +import { + Scene, + Router, + Actions, + ActionConst, + Overlay, + Tabs, + Modal, + Drawer, + Stack, + Lightbox, +} from 'react-native-router-flux'; +``` + +## Link + +本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-reanimated、@react-native-ohos/react-native-reanimated 的原生端代码,如已在 HarmonyOS 工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-screens 文档](/zh-cn/react-native-screens.md)、[@react-native-ohos/react-native-screens 文档](/zh-cn/react-native-screens.md)进行引入 + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下环境验证通过: + +1. RNOH: 0.72.x/0.77.x; SDK:HarmonyOS 6.0.0.47 (API Version 20 Release); IDE:DevEco Studio 6.0.0 Release; ROM:NEXT.5.0.0.212; + +## 组件 + +> [!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 | +| scenes | 定义路由场景配置(路由表) | any | no | iOS/Android | yes | + + +**Actions.create方法:** + +该方法允许在React创建之前创建所有操作,如果不用此方法可以将根元素作为子元素传递给Router. +### 2. Scene - 场景 + +定义页面路由配置的核心接口 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| key | 场景的唯一标识符 | string | yes | iOS/Android | yes | +| component | 场景对应的React组件 | React.ComponentType | no | iOS/Android | yes | +| initial | 是否作为初始场景 | boolean | no | iOS/Android | yes | +| type | 导航动作类型 | ActionConstShort | no | iOS/Android | yes | + + + +### 3. Actions - 导航类 + +定义了 导航操作的所有方法。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| jump | 跳转到指定场景 | (sceneKey: string, props?: any) => void | no | iOS/Android | yes | +| pop | 返回上一个场景 | (params?: { animated?: boolean }) => void | no | iOS/Android | yes | +| push | 推入新场景 | (sceneKey: string, props?: any) => void | no | iOS/Android | yes | +| refresh | 刷新当前场景 | (props?: any) => void | no | iOS/Android | yes | +| replace | 替换当前场景 | (sceneKey: string, props?: any) => void | no | iOS/Android | yes | +| reset | 重置导航栈到指定场景 | (sceneKey: string, props?: any) => void | no | iOS/Android | yes | + + + + + +## 遗留问题 + +无 +## 其他 + + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-router-flux) ,请自由地享受和参与开源。