为了账号安全,请及时绑定邮箱和手机立即绑定

react-navigation5.0导航器的介绍和安装

标签:
React Native

什么是导航器

一般来讲,大部分的手机应用都是需要多个页面的,比如说

iOS系统的设置应用,有很常见的堆栈式导航

比如手机只带的照片应用,联系人应用等等。

那么这些页面之间如何跳转,如何传参,如何记录跳转的记录,而且大部分页面都会有一个标题栏,这些功能大部分是相同的,所以我们需要一个组件来封装这些重复的部分,这就是导航器的作用。

在这一章中我们要学习的导航器是react navigation,它是react native官方推荐的导航器,原本react native是有自己的导航器的,但是因为性能太差,用起来也不方便,限制也很多,所以现在基本没什么用了。

react navigation完全由react native组件实现,所以非常灵活,组件和手势定制能力强,性能也表现的还是流畅。

我们要用的react navigation版本是第5个大版本,在以前的版本中,多种导航器都是放在一个包里的,从第四版开始,react navigation拆分出了多个包,分为核心包、堆栈式导航器、抽屉导航器、标签导航器,到了第五版,就连标签导航器也拆分成了顶部标签导航器、底部标签导航器,而且整个用法也发生了相当大的改变,除了页面之间跳转的api和以前的版本保持一致之外,几乎完全都不一样了。以前的版本是使用配置的方式,一旦配置之后,想要动态修改导航,就很难了。第五版react navigation完全使用组件的方式来实现,不仅更符合react世界的一切皆组件的理念,也天然就能动态设置导航了,比如说标签导航器,我们可以在很简单的做到在应用运行时,动态修改标签的个数。当然在以前的版本中也可以做到,但是实现方式非常繁琐,不容易理解。

现在,我们来安装react navigation吧

第一步,安装核心包

yarn add @react-navigation/native

第二步,安装react navigation的依赖项

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

react-native-reanimated 这是一个性能非常好的动画库

react-native-gesture-handler 是一个跨平台的手势库

react-native-screens 这个库基本不会单独使用,都是作为react navigation的依赖,用原生代码实现了Screen组件,让每一个页面都应用在Screen组件上,如果不安装启动这个库,react-nvigation将会使用View组件实现,性能可能会差一些。
需要在index.js中启用

import { enableScreens } from 'react-native-screens';

enableScreens();

react-native-safe-area-context 安全区域组件库,因为现在iphone x还有越来越多的android异性屏的兴起,我们渲染的组件很可以无法正确的显示出来,这个库可以让我们的组件在安全的区域显示

@react-native-community/masked-view 是一个带蒙版的视图,是下一节中我们要学习的堆栈式导航器所依赖的库

第三步,因为react native 0.60以上,多了自动链接的功能,所以不需要再手动运行react-native link,如果你有mac电脑,并且想运行iOS端,那么还需要运行

cd ios && pod install
cd ..

第四步,进入文件夹android/app/build.grade,在dependencies(依赖项)里添加两行,这两个是react-native-screens的依赖项

implementation 'androidx.appcompat:appcompat:1.1.0-rc01' 
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

再进入android/app/src/main/java/下的MainActivity.java文件,这一步是需要对手势系统做一些支持。

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "应用名";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

为了达到android和iOS保持一致的体验,不得不重新封装手势系统,所以这里会涉及到一些原生的代码
第五步,在index.js里添加

import 'react-native-gesture-handler'; 
// 如果不加这一行,在开发时是好的,在线上版本很有可能闪退。
点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
104
获赞与收藏
33

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消