npm package: @ohmi/react-navigation
Description: Routing and navigation for your React Native apps
Latest version: 2.16.0-rc.1.0.4

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>@ohmi/react-navigation</code> </h1>
</p>
<p align="center">
    <a href="https://github.com/react-navigation/react-navigation/tree/2.16.0">
        <img src="https://img.shields.io/badge/platforms-android%20%7C%20ios%20%7C%20windows%20%7C%20macos%20%7C%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://github.com/react-navigation/react-navigation/blob/2.16.0/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>

> [!TIP][github 地址](https://github.com/react-native-oh-library/react-navigation)

## 介绍
该项目基于[react-navigation](https://github.com/react-native-oh-library/react-navigation)开发。

## 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：[react-navigation Releases](https://e.gitee.com/kunyuan-hongke/repos/kunyuan-hongke/react-navigation/releases) ,并下载适用版本的 tgz 包。

进入到工程目录并输入以下命令：

<!-- tabs:start -->

#### **npm**

```bash
npm install @ohmi/react-navigation
```

#### **yarn**

```bash
yarn add @ohmi/react-navigation
```

<!-- tabs:end -->

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名不变。

```js
import { createStackNavigator } from "react-navigation";

const CreateStackNavigatorDemo = createStackNavigator({
  Home: {
    screen: xxx,
  },
  Detail: {
    screen: xxx,
  },
});

export default CreateStackNavigatorDemo;
```

## 约束与限制

### 兼容性

要使用此库，需要使用正确的 React-navigation 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/navigation Releases](https://e.gitee.com/kunyuan-hongke/repos/kunyuan-hongke/react-navigation/releases)

## Navigation

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 属性/回调

| Name                        | Description                                                                                                                                                                                                                                                                                      | Type                                    | Default    | Required | Platform    | HarmonyOS Support |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | ---------- | -------- | ----------- | ----------------- |
| navigation.state            | 屏幕当前状态/路由                                                                                                                                                                                                                                                                                   | object                                  |            | no       | ios/android | yes                |


### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| navigation.navigate             | 页面跳转功能                                                                                                   | function | no       | ios/android | yes               |
| navigation.goBack               | 关闭活动页面并返回                                                                                                | function | no       | ios/android | yes               |
| navigation.addListener          | key:willFocus \| didFocus \| willBlur \| didBlur                                                         | function | no       | ios/android | yes               |
| navigation.isFocused            | 查询屏幕的聚焦状态，返回 true ｜ false                                                                                | callback | no       | ios/android | yes               |
| navigation.setParams            | 对路由参数进行修改                                                                                                | /        | no       | ios/android | yes               |
| navigation.getParam             | 获取路由参数的一个方法。它的作用是从当前路由的参数 (params) 中获取指定的参数值，并且提供一个备用值（fallback），当该参数不存在或未定义时，使用备用值。                     | callback | no       | ios/android | yes               |
| navigation.push                 | push 方法用于将一个新的屏幕（route）推送到当前的堆栈中。和 navigate 不同的是，push 会始终将目标页面推送到堆栈的顶部，即使目标页面已经存在于堆栈中。这样可以在堆栈中存在多个相同的页面。 | function | no       | ios/android | yes               |
| navigation.pop                  | pop 方法用于回退到堆栈中的前一个页面。如果你提供一个数字参数 n，则表示回退 n 个页面。例如，pop (2) 会回退两个页面。                                       | function | no       | ios/android | yes               |
| navigation.popToTop             | 跳到栈顶页面，清除其他页面                                                                                            | function | no       | ios/android | yes               |
| navigation.replace              | 使用 replace 后，当前页面将被 Profile 页面替代，历史堆栈中不会留下当前页面的记录。                                                       | function | no       | ios/android | yes               |
| navigation.reset                | 清空当前的导航堆栈，使用 navigate 动作将 Profile 页面推送到新的堆栈。                                                             | function | no       | ios/android | yes               |
| navigation.dismiss              | 关闭当前堆栈，返回父堆栈                                                                                             | function | no       | ios/android | yes               |
| navigation.dispatch             | 你需要自定义行为，dispatch 允许你直接将动作传递给路由器。                                                                        | function | no       | ios/android | yes               |
| navigation.dangerouslyGetParent | 获取当前屏幕的父导航器                                                                                              | function | no       | ios/android | yes               |

## StackActions

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| StackActions.push     | 推送操作在堆栈顶部添加一条路线，并向前导航。             | function | no       | ios/android      | yes               |
| StackActions.pop      | pop 动作用于从栈中返回一个或多个页面，可指定返回页面数量。    | function | no       | ios/android      | yes               |
| StackActions.replace  | replace 动作会替换栈中的某个路由（通常是最顶部的路由）。   | function | no       | ios/android      | yes               |
| StackActions.popToTop | popToTop 动作会将栈中的所有页面都退出，直接跳转到栈顶页面。 | function | no       | ios/android      | yes               |

## createStackNavigator

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| createStackNavigator     | 为应用程序提供一种在屏幕之间切换过渡的方法，每个新屏幕都放在堆栈的顶部。             | function | no       | ios/android      | yes               |

## createSwitchNavigator

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| createSwitchNavigator     | SwitchNavigator 的目的是一次只显示一个屏幕。             | function | no       | ios/android      | yes               |


## createDrawerNavigator

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| createDrawerNavigator     | 创建抽屉导航器。             | function | no       | ios/android      | yes               |

## createTabNavigator

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| createTabNavigator     | 创建Tab导航器。             | function | no       | no      | no               |

## createBottomTabNavigator

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| createBottomTabNavigator     | 屏幕底部的一个简单标签栏，让您在不同路线之间切换。             | function | no       | ios/android      | yes               |

## createMaterialTopTabNavigator

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| createMaterialTopTabNavigator     | 屏幕顶部的一个以材料设计为主题的标签栏，通过点击路线或水平滑动来切换不同的路线。             | function | no       | ios/android      | yes               |

## withNavigation

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| withNavigation     | withNavigation是一个高阶组件，它将导航属性传递给包装组件。             | function | no       | ios/android      | yes               |

## withNavigationFocus

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 静态方法

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| withNavigationFocus     | withNavigationFocus 是一个高阶组件，它将 isFocused 属性传递给包装组件。             | function | no       | ios/android      | yes               |

## NavigationEvents

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### 组件

| Name     | Description | Type     | Required | Platform    | HarmonyOS Support |
| -------- | ----------- | -------- | -------- | ----------- | ----------------- |
| NavigationEvents     | NavigationEvents 是一个提供声明式 API 用于订阅导航事件的 React 组件。             | function | no       | ios/android      | yes               |


## 遗留问题

## 其他

## 开源协议

本项目基于 [The MIT License (MIT)](https://github.com/react-native-webview/react-native-webview/blob/master/LICENSE) ，请自由地享受和参与开源。