React Native 實驗室 - 項目初始化

引言

githu源碼傳送門

本文主要包含如下幾部分:

• 初始化 React Native 項目
• Tab + Bottom + Stack 混合導航
• 最終效果 Gif

關注公衆號 剪刀手解柒 發送 RN初始化獲取完整視頻 。

1、初始化 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，以下所示：

2、Tab + Bottom + Stack 混合導航

1. 選擇一個合適的導航庫

在使用React Native開發移動應用程序時，最重要的步驟之一就是選擇合適的導航庫。通常來講，有如下兩種選擇方案：

• react-navigation 官方文檔
• react-native-navigation 官方文檔

在項目 React Native 實驗室 中選擇了 react-navigation 做爲導航庫，在此不作詳細對比，有興趣的同窗能夠參考如下連接：

• React Navigation vs. React Native Navigation: Which is right for you?
• React導航的主要貢獻者Brent Vatne的精彩演講
• Brent Vatne的演講

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 簡介

react-navigation 提供了簡單易用的跨平臺導航方案，在 iOS 和 Android 上均可以進行翻頁式、tab 選項卡式和抽屜式的導航佈局。其提供如下7個API用於建立不一樣的導航方式。（此處不作過多介紹，畢竟 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 實驗室 中基於 createStackNavigator、createSwitchNavigator、createDrawerNavigator 及 createMaterialBottomTabNavigator 等實現了基礎路由跳轉功能。效果圖以下：

後話

歡迎關注個人我的公衆號：剪刀手解柒