React Native 修改Android工程目錄

標(biāo)準(zhǔn)的React-Native Android項目，用Android Studio或者IntelliJ Idea打開，需要打開React-Native下的android目錄，而作為一名android開發(fā)者，當(dāng)然希望是打開React-Native項目就是Android的項目了。為此，我們需要修改整個React-Native項目（這里可以把一個Android項目改成React-Native項目或者把React-Native改為Android，我這里用的是第一種方式）。

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

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

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

當(dāng)前窗口編譯打包了一個 Android apk 并且把它安裝、運行在了虛擬機(jī)環(huán)境里

新開一個命令行窗口起了一個 HTTP 服務(wù)在監(jiān)聽 8081 端口。

前者好理解，后者是為什么呢？

 index.android.js 是應(yīng)用的JS 入口文件。為方便調(diào)試，RN 將編譯打包一個 debug 版本的 APK 把它安裝到虛擬機(jī)環(huán)境，App 內(nèi)是靠發(fā)送 HTTP 請求到開發(fā)機(jī)上獲取這個JS文件來進(jìn)行 UI 渲染的：

react-native run-android

那么這兩步在 RN 內(nèi)是如何實現(xiàn)的呢？

react-native 命令執(zhí)行的是上文安裝的react-native-cli，但這個包沒有做實際的事情，真正執(zhí)行的代碼是在 react-native 這個庫的 local-cli 文件夾里。

就拿 react-native run-android 來說，它實際執(zhí)行的代碼是react-native/private-cli/src/runAndroid/runAndroid.js執(zhí)行后，命令行窗口的輸出如下：

在修改后的工程中執(zhí)行 react-native run-android 會發(fā)生錯誤，提示找不到android目錄，因為我們修改了工程的路徑。根據(jù)上面的分析我們知道，主要執(zhí)行打包、安裝、運行的代碼都發(fā)生在runAndroid.js文件中，是不是可以修改runAndroid.js文件從而實現(xiàn)正常的運行呢。我們下面來試下：

首先分析代碼：

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',

}],

};

通過分析配置，我們發(fā)現(xiàn)我們的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文件中，每次執(zhí)行npm install都會拉去react-native倉庫的代碼，所以我們每次install完還要再修改runAndroid.js文件，這好不人性。

這里我們fork facebook倉庫，然后直接修改runAndroid.js文件，然后將我們的react-native倉庫改為我們fork的倉庫即可。

但是當(dāng)我們用于不同的flavor的時候，就不行了：比如我們要打包xxxDebug的后綴是xxx的包時，就失效，并不能按照我們的需求來執(zhí)行。如何做呢？

我們可以在package.json中添加script，如下：

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

運行時，只需執(zhí)行：npm run android。

當(dāng)然也可以使用vscode 來運行，在vscode中，修改launch.json：

"runArguments": [

  "--androidRoot",

   "./",

  "--appFolder",

   "android",

  "--variant",

   "xxxDebug",

  "--appIdSuffix",

   "xxx",

  "--main-activity",

  "SplashActivity"

]

加入如上參數(shù)，然后點擊debug Android 按鈕也可以直接跑起來android項目。

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