引言

githu源码传送门

本文主要包含以下几部分:

  • 初始化 React Native 项目
  • Tab + Bottom + Stack 混合导航
  • 最终效果 Gif

一、初始化 React Native 项目

RN 基础环境配置

React Native 中文网之搭建开发环境

项目初始化可以参考官方文档,写的比较详细。其中,新建项目主要有以下步骤:

  • init
npx react-native init RNLaboratory
  • run
cd RNLaboratory
react-native run-ios
  • 注意:
  1. 安装 CocoaPods

由于 RN 0.60+ 版本依赖 CocoaPods,但是国内难以访问此仓库。所以,在执行 npx react-native init RNLaboratory 进行初始化项目时会卡在 info Installing required CocoaPods dependencies,如下图所示:

此时可以安装国内镜像,参考文档。若实现安装好此镜像,当执行 npx react-native init RNLaboratory 时,会发现初始化项目很快,如图所示:

  1. 若在 Xcode 直接运行应用时应选择 .xcworkspace 文件,而不是 .xcodeproj 文件。

当以上步骤顺利完成后,使用命令 react-native run-ios 启动 APP,如下所示:

二、Tab + Bottom + Stack 混合导航

1. 选择一个合适的导航库

在使用React Native开发移动应用程序时,最重要的步骤之一就是选择合适的导航库。一般来说,有以下两种选择方案:

在项目 React Native 实验室 中选择了 react-navigation 作为导航库,在此不做详细对比,有兴趣的同学可以参考以下链接:

2. 安装及配置

可参考官方文档,其主要流程如下:

安装

  1. 安装 react-navigation
yarn add react-navigation
# or with npm
npm install react-navigation
  1. 安装 react-navigation 相关依赖
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

IOS 配置

cd ios
pod install
cd ..

Android 配置

  1. 修改android/app/build.gradle, 在该文件 dependencies 中添加如下两行代码:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
  1. 修改 android/app/src/main/java/com/APP_NAME/MainActicity.java,如下所示:
package com.reactnavigation.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 "Example";
  }

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

3. react-navigation 简介

  • createStackNavigator
  • createSwitchNavigator
  • createAnimatedSwitchNavigator
  • createDrawerNavigator
  • createBottomTabNavigator
  • createMaterialBottomTabNavigator
  • createMaterialTopTabNavigator

注意:

  1. 若运行时报以下错误,可根据提示知相应的API已由 react-navigation 移至相应的库,需安装相应的依赖。

  1. 若引入 react-native-vector-icons 时出现以下错误,可参考 How to use vector icons in your react-native project 解决。

最终效果 Gif

在项目 React Native 实验室 中基于 createStackNavigatorcreateSwitchNavigatorcreateDrawerNavigatorcreateMaterialBottomTabNavigator 等实现了基础路由跳转功能。效果图如下:

后话

欢迎关注我的个人公众号:剪刀手解柒

03-05 21:06