使 React Native App 更具原生质感

发布时间:2019-06-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使 React Native App 更具原生质感脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

今天向大家推荐我的开项目,一款为 react-native 打造的原生导航库。由于导航方式是用原生组件实现的,所以体验会比 react-navigation 稍好,此外,同样的原因,使得 react-native 业务模块可以和原生业务模块完美契合。

161cd07d449ba129?w=2442&h=1445&f=png&s=235710

这款导航库名为 react-native-navigation-hybrid,正如名称所暗示的那样,它可以轻松实现原生页面和 RN 页面的相互跳转和传值,而且由于都使用原生的导航组件,所以即便是原生工程师,也难以辨认哪些页面可能是由 react-native 实现的。

上图是项目自带的 demo, 展示本库大部分功能。

博主也 fork 了一个比较受欢迎的 react-native app,并用 react-native-navigation-hybrid 替换了react-navigation。

闪屏 iOS 效果对照:

react-navigation react-native-navigation-hybrid

使 React Native App 更具原生质感

主页面 AndROId 6.0 效果对照:

react-navigation react-native-navigation-hybrid

使 React Native App 更具原生质感

使 React Native App 更具原生质感

以下是源码:

改造前的 reading

改造后的 reading

react-native-navigation-hybrid

脚本宝典总结

以上是脚本宝典为你收集整理的使 React Native App 更具原生质感全部内容,希望文章能够帮你解决使 React Native App 更具原生质感所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。