Hybrid Navigation

Hybrid Navigation

Hybrid Navigationopen in new window是一款 React Native 导航组件，支持在 React 页面和原生页面之间无缝导航。

特性

  • 使用原生导航组件实现 React Native 页面间的导航，不仅具有更优的性能，而且使得 RN 页面具有原生质感
  • 原生页面和 RN 页面共享路由，使得它们之间相互跳转和传值轻而易举
  • 内置 drawer、tabs、stack 标准容器，同时支持自定义容器和导航
  • 支持 Deep Link

快速开始

在以 RN 为主的项目中，在应用入口（如 index.js）需完成三件事：注册页面、设置全局样式（可选）、设置根布局。

import Navigation, { BarStyleDarkContent } from 'hybrid-navigation';
import Home from './Home';

// 设置全局样式
Navigation.setDefaultOptions({ topBarStyle: BarStyleDarkContent });

// 注册页面
Navigation.startRegisterComponent();
Navigation.registerComponent('Home', () => Home);
Navigation.endRegisterComponent();

// 设置根布局
Navigation.setRoot({
  stack: {
    children: [{ screen: { moduleName: 'Home' } }],
  },
});

详细集成步骤见 集成到以 RN 为主的项目。

README-2021-10-19-15-39-45

Support

版本RN 版本RN 架构
2.x< 0.82旧架构
3.x>= 0.83新架构

版本变更与升级说明见仓库 CHANGELOGopen in new window。

运行 example 项目

首先 clone 本项目

git clone [email protected]:listenzz/hybrid-navigation.git
cd hybrid-navigation

然后在项目根目录下运行如下命令：

yarn install
# &
yarn start

在 Android 上运行

首先，确保你有一个模拟器或设备

如果熟悉原生开发，使用 Android Studio 打开 android 目录，像运行原生应用那样运行它。

注意修改 Gradle JDK 版本为 17，否则会报错。

Cause: error=2, No such file or directory

也可以使用命令行：

# 在项目根目录下运行
yarn android

你可能需要运行如下命令，才可以使用 Hot Reload 功能

adb reverse tcp:8081 tcp:8081

Download demo apkopen in new window

或通过扫描二维码安装 demo

README-2021-10-19-15-58-19

在 iOS 上运行

首先安装 cocoapods 依赖，在项目根目录下运行如下命令：

cd ios && pod install
# 成功安装依赖后，回到根目录
cd -

如果熟悉原生开发，使用 Xcode 打开 ios 目录，像运行原生应用那样运行它，或者使用命令行：

# 在项目根目录下运行
yarn ios

目录

上次更新: