React Native 实验室 - 项目初始化

2020/2/12 14:09:05

编程Tag： 前端 react-native ios android

本文主要是介绍React Native 实验室 - 项目初始化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

引言

githu源码传送门

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

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

关注公众号 剪刀手解柒 发送RN初始化获取完整视频。

剪刀手解柒

一、初始化 React Native 项目

RN 基础环境配置

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

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

init

npx react-native init RNLaboratory

cd RNLaboratory
react-native run-ios

注意：

安装 CocoaPods

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

非镜像安装卡顿图

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

镜像安装图

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

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

RN启动默认图

二、Tab + Bottom + Stack 混合导航

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

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

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

2. 安装及配置

可参考官方文档，其主要流程如下：

安装

安装 react-navigation

yarn add react-navigation
# or with npm
npm install react-navigation

安装 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 配置

修改android/app/build.gradle, 在该文件 dependencies 中添加如下两行代码：

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

修改 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 简介

react-navigation 提供了简单易用的跨平台导航方案，在 iOS 和 Android 上都可以进行翻页式、tab 选项卡式和抽屉式的导航布局。其提供以下7个API用于创建不同的导航方式。（此处不做过多介绍，毕竟 react-navigation 官方网站写的不错...😁😁😁）

createStackNavigator
createSwitchNavigator
createAnimatedSwitchNavigator
createDrawerNavigator
createBottomTabNavigator
createMaterialBottomTabNavigator
createMaterialTopTabNavigator

注意：

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

react-navigation错误

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

Icons错误

最终效果 Gif

在项目 React Native 实验室 中基于 createStackNavigator、createSwitchNavigator、createDrawerNavigator 及 createMaterialBottomTabNavigator 等实现了基础路由跳转功能。效果图如下：

效果演示