@ohmi/react-navigation NPM

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：react-navigation Releases ,并下载适用版本的 tgz 包。

进入到工程目录并输入以下命令：

npm

npm install @ohmi/react-navigation

yarn

yarn add @ohmi/react-navigation

下面的代码展示了这个库的基本使用场景：

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

Navigation

属性/回调

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

静态方法

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

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
createStackNavigator	为应用程序提供一种在屏幕之间切换过渡的方法，每个新屏幕都放在堆栈的顶部。	function	no	ios/android	yes

createSwitchNavigator

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
createSwitchNavigator	SwitchNavigator 的目的是一次只显示一个屏幕。	function	no	ios/android	yes

createDrawerNavigator

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
createDrawerNavigator	创建抽屉导航器。	function	no	ios/android	yes

createTabNavigator

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
createTabNavigator	创建Tab导航器。	function	no	no	no

createBottomTabNavigator

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
createBottomTabNavigator	屏幕底部的一个简单标签栏，让您在不同路线之间切换。	function	no	ios/android	yes

createMaterialTopTabNavigator

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
createMaterialTopTabNavigator	屏幕顶部的一个以材料设计为主题的标签栏，通过点击路线或水平滑动来切换不同的路线。	function	no	ios/android	yes

withNavigation

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
withNavigation	withNavigation是一个高阶组件，它将导航属性传递给包装组件。	function	no	ios/android	yes

withNavigationFocus

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
withNavigationFocus	withNavigationFocus 是一个高阶组件，它将 isFocused 属性传递给包装组件。	function	no	ios/android	yes

NavigationEvents

组件

Name	Description	Type	Required	Platform	HarmonyOS Support
NavigationEvents	NavigationEvents 是一个提供声明式 API 用于订阅导航事件的 React 组件。	function	no	ios/android	yes

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。

clamp create-react-context hoist-non-react-statics path-to-regexp query-string react-lifecycles-compat react-native-safe-area-view react-native-screens @ohmi/react-navigation-deprecated-tab-navigator react-navigation-deprecated-tab-navigator @ohmi/react-navigation-drawer react-navigation-drawer @ohmi/react-navigation-stack react-navigation-stack @ohmi/react-navigation-tabs react-navigation-tabs

2.16.0-rc.1.0.2

6 months ago

2.16.0-rc.1.0.1

7 months ago

2.16.0-rc.1.0.0

7 months ago