使 React Native App 更具原生质感

怼烎@ 2022-02-26 04:52 60阅读 0赞

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

![161cd07d449ba129?w=2442&h=1445&f=png&s=235710][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 效果对照：

<table> 
 <thead> 
  <tr> 
   <th align="center">react-navigation</th> 
   <th align="center">react-native-navigation-hybrid</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><span><img src="https://image-static.segmentfault.com/398/927/3989279717-5a938592eabc6_articlex" alt="" title=""></span></td> 
   <td align="center"><span><img src="https://image-static.segmentfault.com/234/749/2347499907-5a9385bacfed0_articlex" alt="https://user-gold-cdn.xitu.io/2018/2/25/161cd12415ebcb17?w=320&amp;h=569&amp;f=gif&amp;s=412972" title="https://user-gold-cdn.xitu.io/2018/2/25/161cd12415ebcb17?w=320&amp;h=569&amp;f=gif&amp;s=412972"></span></td> 
  </tr> 
 </tbody> 
</table>

主页面 Android 6.0 效果对照：

<table> 
 <thead> 
  <tr> 
   <th align="center">react-navigation</th> 
   <th align="center">react-native-navigation-hybrid</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><span><img src="https://image-static.segmentfault.com/192/437/1924378432-5a9386773e47a_articlex" alt="https://user-gold-cdn.xitu.io/2018/2/25/161cd183daa4301d?w=320&amp;h=569&amp;f=gif&amp;s=1387104" title="https://user-gold-cdn.xitu.io/2018/2/25/161cd183daa4301d?w=320&amp;h=569&amp;f=gif&amp;s=1387104"></span></td> 
   <td align="center"><span><img src="https://image-static.segmentfault.com/358/537/3585377311-5a93868aa9282_articlex" alt="https://user-gold-cdn.xitu.io/2018/2/25/161cd1a3c3ad620b?w=320&amp;h=569&amp;f=gif&amp;s=1465696" title="https://user-gold-cdn.xitu.io/2018/2/25/161cd1a3c3ad620b?w=320&amp;h=569&amp;f=gif&amp;s=1465696"></span></td> 
  </tr> 
 </tbody> 
</table>

以下是源码：

[改造前的 reading][reading]

[改造后的 reading][reading 1]

[react-native-navigation-hybrid][]

[161cd07d449ba129_w_2442_h_1445_f_png_s_235710]: /images/20220226/94c2b8b9d88f4be3ba5da4df20101d55.png
[react-native-navigation-hybrid]: https://github.com/listenzz/react-native-navigation-hybrid
[reading]: https://github.com/attentiveness/reading
[reading 1]: https://github.com/listenzz/reading