react-native-navigation-hybrid

React Native Navigation that supports seamless navigation between Native and React.

navigation-android

Running the Playground Project

To run the playground project, first clone this repo:

git clone git@github.com:listenzz/react-native-navigation-hybrid.git
cd react-native-navigation-hybrid

run on Android

First, make sure that you have a simulator or device.

Then,

npm install
# &
npm start

Then, in another CLI window:

npm run run:android

Download demo apk

或通过扫描二维码安装 demo

demo-qrcode

run on iOS

First,

npm install
# &
cd ios && pod install
# &
npm start

Then, in another CLI window:

npm run run:ios

特性

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

目录

集成到以 RN 为主的项目

为原生项目添加 RN 模块

容器与导航

RN 页面与原生页面相互跳转和传值

Hooks

设置样式

DeepLink

最近更新日志

React Native version(s) Supporting Navigation version(s) 发布日期
>= 0.60 0.28.1 2020/11/19
< 0.60 0.16.14 2019/12/20

0.28.x

  • 升级 androidx.appcompat:appcompat 到 1.2

0.27.x

  • 重写了路由和 DeepLink

  • 当弹出或关闭 modal 时,它底下的页面的 visible 状态也会发生变化

0.26.x

  • 不再对 statusBarColorAndroid 作过多干预

0.25.x

  • Navigator 添加静态方法 find,通过 moduleName 获取对应的 navigator 实例

    const navigator = await Navigator.find('B')
    navigator.redirectTo('D')
  • 移除了 delay, reload, foreground 等隐藏方法

0.24.x

  • navigator.popTo 现在的参数可以是 moduleName, 返回到指定的页面,不再需要传递 sceneId 了

0.23.x

  • support deep link with query string

0.22.x

  • 适配 RN 0.62

  • 改变了 present, showModal 的方法签名

  • 重新添加 useVisibleEffect 钩子,移除了 useVisibility

    import React, { useCallback } from 'react'
    import { useVisibleEffect } from 'react-native-navigation-hybrid'
    
    function Lifecycle({ sceneId }) {
      const visibleCallback = useCallback(() => {
        console.info(`Page is visible [${sceneId}]`)
        return () => {
          console.info(`Page is gone [${sceneId}]`)
        }
      }, [sceneId])
    
      useVisibleEffect(sceneId, visibleCallback)
    }
  • 添加 useVisible 钩子 (0.22.1)

    import React, { useEffect } from 'react'
    import { useVisible } from 'react-native-navigation-hybrid'
    
    function Lifecycle({ sceneId }) {
      const visible = useVisible(sceneId)
    
      useEffect(() => {
        if (visible) {
          console.info(`Page is visible [${sceneId}]`)
        } else {
          console.info(`Page is invisible [${sceneId}]`)
        }
      }, [visible, sceneId])
    }

0.21.x

  • 移除了额外的 componentDidAppearcomponentDidDisappear 生命周期函数,移除了 useVisibleEffect 钩子函数

    现在使用 useVisibility 钩子来达到同样的目的

    import React, { useState, useEffect } from 'react'
    import { useVisibility } from 'react-native-navigation-hybrid'
    
    function Lifecycle({ sceneId }) {
      useVisibility(sceneId, (visible) => {
        if (visible) {
          console.info(`Page is visible [${sceneId}]`)
        } else {
          console.info(`Page is gone [${sceneId}]`)
        }
      })
    }
  • 移除了额外的 onBackPressed 生命周期函数和 useBackEffect 钩子函数

    现在使用 BackHandleruseBackHandler 来处理 Android 平台的 modal 的返回事件

    import { BackHandler } from 'react-native'
    // or
    import { useBackHandler } from '@react-native-community/hooks'
  • 移除了额外的 onComponentResult 生命周期函数

    现在使用 useResult 这个钩子函数来实现同样的功能

  • 移除了额外的 onBarButtonItemClick 生命周期函数

0.20.x

  • 移除了 replace replaceToRoot

  • 添加 redirectTo 以取代 replace

0.19.x

  • pop popTo popToRoot dismiss hideModal switchTab 现在返回一个 Promise

0.18.x

  • 破坏性更新:TabBarnavigationBarColorAndroid 的 API 略有变更。

0.16.x or 0.17.x

  • setRoot 现在返回一个 Promise

  • 完善泛型支持

  • 支持 React Hooks,在函数组件中,使用 useVisibleEffect 代替 componentDidAppearcomponentDidDisappear,使用 useResult 代替 onComponentResult,使用 useBackEffect 代替 onBackPressed

  • push presentshowModal 现在返回一个 Promise

0.14.x

  • 修复 unselectedIcon 不生效的问题

  • 现在可以通过 Garden.setRightBarButtonItem(null) 移除 topBar 上的按钮

  • 优化了 switchTabsetRoot 的过渡效果

  • 修复额外生命周期 componentDidAppear 派发不准确的问题

  • [Android] 修复 Activity 冷重启的问题

  • [Android] 优化当应用从后台进入前台时的事务执行顺序

  • 自定义 TabBar 传递的数据发生变化,详见 自定义 TabBar 文档

  • 优化和 Garden 相关的若干 api,详见 style 文档

0.13.x - 2019/06/18

  • 修复和 react-native-code-push 协作偶尔导致的崩溃

  • Android 迁移到 Java 8

如果你的 app/build.gradle 没有以下配置,请加上

android {
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
}

Last updated

v0.28.1

Install

npm install react-native-navigation-hybrid
yarn add react-native-navigation-hybrid

CDNs

extras

Contributors

  • listenzz