参考iOS开发中的 UINavigationController 的思想，实现了在React项目中的类似 iOS 页面转场的效果。

github：navigation-controller

  • 使用方式
    1
    $ npm install @lilong767676/navigation-controller
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { NavigationController } from '@lilong767676/navigation-controller';


// 先创建路由
// 路由名 - 页面 配置
export const routes = {
  root: App,
  [RouteNames.addFriendPage]: AddFriendsPage,
  [RouteNames.newFriendsPage]: NewFriendsPage,
  [RouteNames.chatHome]: ChatHome,
  [RouteNames.chatPage]: ChatPage,
};

// 初始化 NavigationController,单例模式，保证全局唯一
const naviController = new NavigationController(routes);

// 设置 rootContainer
naviController.setRootContainer(ele);

// 页面跳转
NavigationController.push(RouteNames.addFriendPage, props);

// 返回上一页面
NavigationController.pop();

// 销毁 NavigationController
naviController.destroy();

效果：