Giter Club home page Giter Club logo

hybrid-navigation's Introduction

hybrid-navigation

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

特性

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

navigation-android

Support

version react-native version
1.0.0+ 0.60.0+

运行 example 项目

首先 clone 本项目

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

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

yarn install
# &
yarn start

在 Android 上运行

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

如果熟悉原生开发,使用 Android Studio 打开 example/android,像运行原生应用那样运行它,也可以使用命令行:

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

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

adb reverse tcp:8081 tcp:8081

Download demo apk

或通过扫描二维码安装 demo

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

在 iOS 上运行

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

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

如果熟悉原生开发,使用 Xcode 打开 example/ios,像运行原生应用那样运行它,或者使用命令行:

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

文档

从这里开始

hybrid-navigation's People

Contributors

8ballbombom avatar devvit avatar gengjiawen avatar listenzz avatar niuguohui avatar trustdec avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

hybrid-navigation's Issues

0.8.0 Android 报错

Could not find generated setter for class com.facebook.react.views.art.ARTShapeShadowNode

若干个 问题

1.如果 icon 用的是图片,如何控制这个 icon 的大小? 现在tabItem的图片不知道为什么,显示超大,如图所示
2.如果leftBarButtonItem的 icon 也设置了图片,标题会消失,如上图所示:
image
3.leftBarButtonItem中的按钮 如果是第一次点击,会有个很明显的点击效果,但是之后再点击,不知道为什么这个点击效果就很不明显了。如下图所示。
4 -13-2018 21-08-07
4.横屏后 头部和尾部与竖屏的时候表现似乎不一致? 如下图所示

image

以下是代码

    static navigationItem = {
        titleItem: {
            title: 'RN navigation',
        },

        leftBarButtonItem: {
            title: 'SETTING',
            action: navigation => {
                console.info('setting button is clicked.');
            },
            icon: Image.resolveAssetSource(require('../images/house.png')),
        },

        topBarColor: '#FF0000',
        tabItem: {
            title: '组件',
            icon: Image.resolveAssetSource(require('../images/house.png')),
            // inactiveIcon: { uri: 'blue_solid', scale: PixelRatio.get() },
            hideTabBarWhenPush: true,
        },
    };

deeplink 似乎没有正常工作

Navigation.setRoot({
tabs: [
{
stack: {
screen: {moduleName: 'LIst'},
},
},
{
stack: {
screen: {moduleName: 'Detail'},
},
}....

xcrun simctl openurl booted hbd://Detail ---->not show details

請問可以用連react-native-push-notification一起用嗎?

就我所知,大部分的react native app都在用react-native-push-notification,但由於wix/react-native-navigation的android不支持到,必需用另一個wix/react-native-notifiction。可惜,wix/react-native-notifiction應用很差,有很多bugs。所以如果能為react-native的navigation生態做出native的解決方案而又可用到react-native-push-notification就最好喔!!

感謝!

https://github.com/zo0r/react-native-push-notification

能否写个结合 dva.js 的例子?

之前一直在用react-navigation,不过在低端安卓机子上反应总有点慢半拍,
这几天对比了下 react-native-navigation-hybrid和react-native-navigation,
决定新项目还是选择用react-native-navigation-hybrid,但是尝试结合 dva.js 来使用总是弄不成功,能否在playground中写个结合的例子?

https://github.com/nihgwu/react-native-dva-starter 这个是react-navigation和 dva 结合的例子

Android 4.4.4 报错

Could not find class 'me.listenzz.navigation.AppUtils$1', referenced from method me.listenzz.navigation.AppUtils.setStatusBarTranslucent

StatusBar.setHidden(true) 时状态栏始终有个色块。

StatusBar.setHidden(true) �生效了,但是状态栏那个位置始终有个色块,正常的状态栏确实隐藏了,下拉一下可以拉下来。
react-native-navigation-hybrid 版本是0.7.14.

android版本有这个问题。 ios 没有

关于didAppear生命周期

有需求要知道是否当前页面出现,React Native Navigation中类似iOS中的生命周期方法

  didAppear() {
    this.setState({ text: 'didAppear' });
  }

  didDisappear() {
    alert('didDisappear');
  }

React Navigation中则是加入了监听

this._navListener = this.props.navigation.addListener('didFocus', () => {
      StatusBar.setBarStyle('light-content');
      isAndroid && StatusBar.setBackgroundColor('#6a51ae');
    });

感觉做成生命周期比较好

关于inactiveIcon的两点疑问

1.从字面上理解,设置inactiveIcon后应该是在当前tab时显示该图标,但是现在情况正好相反。
比如下图,默认是在组件tab上,应该是实心却显示虚的,但是切换到布局tab后,组件反而成实心,布局成虚的图标了。

4 -14-2018 14-08-24

2.切换 tab 时 底部的字颜色变了,但是图标的颜色并没有变,能否让图标也跟着变化。或者fontUri这个函数增加一个改变字体颜色的参数,但我感觉最好能统一变化。

关于topbar跟下面的页面遮盖的问题

render() {
const { value, onIncreaseClick } = this.props;
return (


);
}
就是这个scrollview要padding这个tabbar的高度 这个布局只能做成这样还是bug? 不知道我描述的清楚么?

如何设置tabbar的图片大小?

tabItem: {
// 底部 TabBarItem 可配置项
title: 'Style',
icon: Image.resolveAssetSource(require('../../images/tabHomeActive.png')),
inactiveIcon: Image.resolveAssetSource(require('../../images/tabHomeInactive.png')),
hideTabBarWhenPush: true,
},
这里有可以设置宽高或者缩放的属性么?

能否动态设置tab的图片?

有一个需求就是节假日的时候需要替换tab栏的图片,能否提供一个方法修改tab的图片 和选中状态图片

tab能否设置图片?

现在文档中只看到设置iconfont 能否增加设置image的属性可以设置网络或本地图片,有一个inactiveImage 一个activeImage

"PopTo Last but one" not work

场景:
一个RN页(A) ,之后push一个Native页面(B),再push一个RN页面(C)。
一共三个页面,因为Native页(B)做push的时候,无法传递popToId给RN页(C),RN页(C)无法感知。

因此,无法PopTo Last but one.

有时rightBarButtonItem并非只有一个

很多 app 设计时右侧按钮会有两个,这个时候 react-native-navigation-hybrid就无法满足需求了
左侧有时候也会有这需求,只不过比右边的出现几率小很多。
底层是不是该判断下,如果是数组 就循环显示出来,如果是对象,就只显示一个
wechatimg49

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.