React Native 修改Android工程目錄

標準的React-Native Android專案，用Android Studio或者IntelliJ Idea開啟，需要開啟React-Native下的android目錄，而作為一名android開發者，當然希望是開啟React-Native專案就是Android的專案了。為此，我們需要修改整個React-Native專案（這裡可以把一個Android專案改成React-Native專案或者把React-Native改為Android，我這裡用的是第一種方式）。

修改完目錄後，react-native run-android將失效，run-ios沒有影響。在Android Studio或IntelliJ Idea中可以直接點選執行按鈕，將程式在手機中執行，然後在終端中啟動node服務：react-native start。這樣修改過的工程就可以正常執行了。

作為一名開發者，當然是使用原始的命令（react-native run-android）最好了，而且上述的方法也不是最好的方法。是否可以透過修改配置檔案使得直接使用react-native run-android 就能正常啟動呢？下面我們就來分析下react-nativerun android的啟動流程。

react-native run-android 命令啟動後你能看到：

當前視窗編譯打包了一個 Android apk 並且把它安裝、執行在了虛擬機器環境裡

新開一個命令列視窗起了一個 HTTP 服務在監聽 8081 埠。

前者好理解，後者是為什麼呢？

 index.android.js 是應用的JS 入口檔案。為方便除錯，RN 將編譯打包一個 debug 版本的 APK 把它安裝到虛擬機器環境，App 內是靠傳送 HTTP 請求到開發機上獲取這個JS檔案來進行 UI 渲染的：

react-native run-android

那麼這兩步在 RN 內是如何實現的呢？

react-native 命令執行的是上文安裝的react-native-cli，但這個包沒有做實際的事情，真正執行的程式碼是在 react-native 這個庫的 local-cli 資料夾裡。

就拿 react-native run-android 來說，它實際執行的程式碼是react-native/private-cli/src/runAndroid/runAndroid.js執行後，命令列視窗的輸出如下：

在修改後的工程中執行 react-native run-android 會發生錯誤，提示找不到android目錄，因為我們修改了工程的路徑。根據上面的分析我們知道，主要執行打包、安裝、執行的程式碼都發生在runAndroid.js檔案中，是不是可以修改runAndroid.js檔案從而實現正常的執行呢。我們下面來試下：

首先分析程式碼：

module.exports= {

  name: 'run-android',

  description: 'builds your app and starts it on a connectedAndroid emulator or device',

  func: runAndroid,

  options: [{

   command:'--install-debug',

}, {

   command: '--root[string]',

   description:'Override the root directory for the android build (which contains the androiddirectory)',

   default: '',

}, {

   command: '--flavor[string]',

   description:'--flavor has been deprecated. Use --variant instead',

}, {

   command: '--variant[string]',

}, {

   command: '--appFolder[string]',

   description: 'Specifya different application folder name for the android source.',

   default: 'android',

}, {

   command:'--appIdSuffix [string]',

   description: 'Specifyan applicationIdSuffix to launch after build.',

   default: '',

}, {

   command:'--main-activity [string]',

   description: 'Name ofthe activity to start',

   default:'MainActivity',

}, {

   command: '--deviceId[string]',

   description: 'buildsyour app and starts it on a specific device/simulator with the ' +

   'given device id(listed by running "adb devices" on the command line).',

}, {

   command:'--no-packager',

   description: 'Do notlaunch packager while building',

}],

};

透過分析配置，我們發現我們的Android目錄為"./"，所以這裡新增一項：

 {

   command:'--androidRoot [string]',

   description: 'androidroot dir',

   default: './'

  }

android工程的執行，分為編譯、打包、安裝：

首先來看build編譯專案：

function buildAndRun(args) {

  process.chdir(path.join(args.root, 'android'));

  const cmd = process.platform.startsWith('win')

   ? 'gradlew.bat'

   : './gradlew';

    console.log(chalk.red('Argument missing for parameter--deviceId'));

   }

  } else {

   console.log('start');

   runOnAllDevices(args,cmd, packageNameWithSuffix, packageName, adbPath);

  }

}

因為改了目錄所以，這裡也要做修改，改為：

process.chdir(path.join(args.root, 'android')); ---> process.chdir(path.join(args.androidRoot, './'));

#執行android程式

function runAndroid(argv, config, args) {

  if (!checkAndroid(args.root)) {

  console.log(chalk.red('Android project not found. Maybe run react-nativeandroid first?'));

   return;

  }

  if (!args.packager) {

  console.log('buildAndRun');

   returnbuildAndRun(args);

  }

這裡需要的是Android的工程路徑，所有需要做修改，改為：

if (!checkAndroid(args.root)) {    ---->  if(!checkAndroid(args.androidRoot)) {

#查詢gradlew檔案，因為我們修改了Android目錄，所有這裡需要修改下：

function checkAndroid(root) {

  return fs.existsSync(path.join(root, 'android/gradlew'));

}

改為如下：

function checkAndroid(androidRoot) {

  return fs.existsSync(path.join(androidRoot, '/gradlew'));

}

透過以上修改，我們這裡的工作基本都做完了。但是runAndroid.js存在於node_moduls檔案中，每次執行npm install都會拉去react-native倉庫的程式碼，所以我們每次install完還要再修改runAndroid.js檔案，這好不人性。

這裡我們fork facebook倉庫，然後直接修改runAndroid.js檔案，然後將我們的react-native倉庫改為我們fork的倉庫即可。

但是當我們用於不同的flavor的時候，就不行了：比如我們要打包xxxDebug的字尾是xxx的包時，就失效，並不能按照我們的需求來執行。如何做呢？

我們可以在package.json中新增script，如下：

"android": "react-native run-android--androidRoot ./ --appFolder android --variant xxxDebug --appIdSuffix xxx--main-activity SplashActivity"

執行時，只需執行：npm run android。

當然也可以使用vscode 來執行，在vscode中，修改launch.json：

"runArguments": [

  "--androidRoot",

   "./",

  "--appFolder",

   "android",

  "--variant",

   "xxxDebug",

  "--appIdSuffix",

   "xxx",

  "--main-activity",

  "SplashActivity"

]

加入如上引數，然後點選debug Android 按鈕也可以直接跑起來android專案。

使用vscode還有一個好處，就是可以在編譯器中debug程式碼，而不像IntelliJ Idea那樣需要開啟chrome，非常方便。