React Native搭建開發環境/link原生依賴問題

簡單STL發表於2019-04-20
React Native開發環境

環境搭建

一、 安裝依賴

必須安裝的依賴有：Node、Python2 以及 JDK 、React Native 命令列工具和 Android Studio。

1. 官網下載安裝Node（Node 的版本必須高於 8.3）

2. 官網下載安裝Python2（版本必須為 2.x）

3. 官網下載安裝JDK（版本必須是 1.8）

jdk配置（右鍵偶的電腦—屬性—高階系統設定—環境變數）：

①. 建立一個名為ANDROID_HOME的環境變數（系統或使用者變數均可），指向你的 Android SDK 所在的目錄

React Native搭建開發環境/link原生依賴問題

②. 把platform-tools目錄新增到環境變數Path中 ③. 接下來配置JAVA_HOME(缺了這一步Android studio會顯示找不到jdk安裝目錄，路徑不包含bin檔案)

    新建變數：JAVA_HOME
    變數值：JDK安裝目錄
複製程式碼

React Native搭建開發環境/link原生依賴問題

④. 在系統變數裡尋找 Path 變數，選擇編輯，新建兩個變數值%JAVA_HOME%\bin，%JAVA_HOME%\jre\bin

React Native搭建開發環境/link原生依賴問題

⑤. 新建環境變數，命名為CLASSPATH，變數值填入.;%Java_Home%\bin;%Java_Home%\lib\dt.jar;%Java_Home%\lib\tools.jar

⑥. 記得配置（官網無記錄）：JRE_HOME C:\Program Files\Java\jre7（根據jdk安裝位置更改路徑）

jdk安裝且環境配置完成，可在cmd中檢查是否安裝成功，命令：java -version

4. React Native命令列工具（react-native-cli）安裝：npm install -g yarn react-native-cli

5. 安裝Android Studio

二、 Android開發環境

1. 安裝翻牆工具

React Native搭建開發環境/link原生依賴問題

2. 安裝Android SDK

Android Studio預設會安裝最新版本的Android SDK

①. 在 Android Studio 的歡迎介面中找到 SDK Manager（右下角選項）。點選Configure，然後就能看到SDK Manager。

②. 在 SDK Manager 中選擇SDK Platforms選項卡，然後在右下角勾選Show Package Details。展開Android 9 (Pie)選項，確保勾選了下面這些元件（重申你必須使用穩定的翻牆工具，否則可能都看不到這個介面）

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image（官方模擬器映象檔案，使用非官方模擬器不需要安裝此元件）

③. 然後點選SDK Tools選項卡，同樣勾中右下角的Show Package Details。展開Android SDK Build-Tools選項，確保選中了 React Native 所必須的28.0.3版本。你可以同時安裝多個其他版本。 最後點選"Apply"來下載和安裝這些元件。

3. 配置ANDROID_HOME環境變數

開啟控制皮膚 -> 系統和安全 -> 系統 -> 高階系統設定 -> 高階 -> 環境變數 -> 新建，建立一個名為ANDROID_HOME的環境變數（系統或使用者變數均可），指向你的 Android SDK 所在的目錄（SDK 預設是安裝目錄：c:\Users\你的使用者名稱\AppData\Local\Android\Sdk）

4. 把 platform-tools 目錄新增到環境變數 Path 中

開啟控制皮膚 -> 系統和安全 -> 系統 -> 高階系統設定 -> 高階 -> 環境變數，選中Path變數，然後點選編輯。點選新建然後把 platform-tools 目錄路徑新增進去（此目錄的預設路徑為：c:\Users\你的使用者名稱\AppData\Local\Android\Sdk\platform-tools）。

注：新增目錄路徑要和之前path已有路徑用分號分割

三、建立新專案

使用 React Native 命令列工具來建立一個名為"demo"的新專案：react-native init demo

建立指定RN版本專案： react-native init demo --verbose --version 0.44.0(版本號)

四、編譯並執行React Native應用

進入專案cd demo

執行專案react-native run-android

link問題

引入navigation

  1. 在 React Native 專案中安裝react-navigation這個包: npm install --save react-navigation
  2. 安裝 react-native-gesture-handler: npm install --save react-native-gesture-handler
  3. Link 所有的原生依賴: react-native link react-native-gesture-handler

相關配置檔案

  1. android>settings.gradle
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir,
'../node_modules/react-native-gesture-handler/android')
複製程式碼
  1. android>app>build.gradle
dependencies {
    implementation project(':react-native-gesture-handler')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

複製程式碼
  1. android>app>src>main>java>com>MainApplication.java
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
複製程式碼
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new RNGestureHandlerPackage(),
      );
    }
複製程式碼
  1. android>app>src>main>java>com>MainActivity.java
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
複製程式碼
@Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }

複製程式碼

注意連結原生依賴（react-native link）時的坑

1. 連結原生庫react-native link後，注意android>app>src>main>java>com> MainApplication.java檔案裡面,有沒有重複，如下：

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RefreshReactPackage(),
        new RNGestureHandlerPackage()
    );
}
複製程式碼

你執行函式的命令因為重複執行link命令重複新增了，手動刪除多餘的即可；

還有settings.gradle也會出現多餘的

2. android\settings.gradle檔案中反斜槓更改：

錯例：

project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-linear-gradient\android')
複製程式碼

3. 錯誤提示效果:app:compileDebugJavaWithJavac

解決：用android studio開啟專案進行編譯後再重新執行專案即可；

  • 使用android studio開啟android檔案即可（而不是開啟整個檔案）
  • 如果還是報錯：將專案android檔案下的 ***.iml 檔案刪掉，重新匯入編譯即可

手動link配置

例：配置react-native-image-picker（一個整合相機和相簿的功能的第三方庫）示例：

react-native-image-picker使用

  1. 首先,安裝下該外掛npm install react-native-image-picker@latest --save
  2. 針對Android和iOS平臺分別進行配置:

android 平臺配置

  1. 在android/settings.gradle檔案中新增如下程式碼：
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

複製程式碼
  1. 在android/app/build.gradle檔案的dependencies中新增如下程式碼：
compile project(':react-native-image-picker')
複製程式碼
  1. 在AndroidManifest.xml檔案中新增許可權：
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
複製程式碼
  1. 最後在MainApplication.Java檔案中新增如下程式碼：
import com.imagepicker.ImagePickerPackage;
 new ImagePickerPackage()
複製程式碼

這樣Android環境就配置好了。

iOS平臺配置

  1. 開啟Xcode開啟專案,點選根目錄,右鍵選擇 Add Files to ‘XXX’,選中專案中的該路徑下的檔案即可:node_modules -> react-native-image-picker -> ios -> select RNImagePicker.xcodeproj
  2. 新增成功後使用link命令：react-native link react-native-image-picker 。
  3. 開啟專案依次使用Build Phases -> Link Binary With Libraries將RNImagePicker.a新增到專案依賴。
  4. 對於iOS 10+裝置，需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription。

前端RN打包

在 Android Studio 中打包，即生成離線的 jsbundle 檔案：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
複製程式碼

路徑解析：

index.android.js：打包生成的檔案

app/src/main/assets/index.android.bundle：打包生成檔案所在目錄

app/src/main/res/：RN中用到的靜態資原始檔打包後生成檔案所在目錄

相關文章