2. 程式人生 > >記一次在Windows上搭建React Native Android環境踩過的坑

記一次在Windows上搭建React Native Android環境踩過的坑

阿新 • • 發佈：2019-02-01

要說最近技術圈什麼比較活躍，我想除了動態載入框架和熱修復技術之外，非Facebook的React Native莫屬了吧，其實RN對IOS的支援比較早，但是Android似乎難產了，直到9月份才剛開源。距離RN開源也有一段時間了，一直沒有去學習，今天興趣來潮，索性學一把吧。

本文假設你的Windows上安裝了Android SDK，並配置好了環境變數。

安裝Node.js

從官網https://nodejs.org/en/下載Node.js的windows版，也不知道為什麼版本迭代這麼快，之前安裝的時候版本還是v0.12的，如今已經到了v5.1版，直接下載最新版就可以了。安裝的時候記得勾選新增到環境變數中去，這樣就不用手動新增環境變量了。

安裝react-native-cli

開啟命令列，輸入npm install -g react-native-cli

初始化專案

命令列輸入react-native init AwesomeProject，這一步如果卡死，建議翻個牆試試，本人在沒翻牆前直接卡死在這一步，後來用了vpn翻了下牆就初始化好了。

這裡寫圖片描述

啟動React Native Server

命令列進入AwesomeProject目錄，執行react-native start開啟server

這裡寫圖片描述

匯入Android專案

使用Android Studio匯入AwesomeProject/android專案，點選run執行（手機和電腦處於同一區域網內）。點選選單，彈出除錯相關的介面。

這裡有一個深坑！
這裡有一個深坑！
這裡有一個深坑！

重要的事情說三次！

由於該除錯介面使用的是懸浮窗彈出，而我使用的是小米實體機進行除錯的，預設情況下會關閉所有應用的懸浮窗許可權，這時候你怎麼按選單鍵或者玩死裡搖手機，該介面都不會出來。解決方法就是在應用許可權裡開啟懸浮窗許可權。

之後按選單鍵就可以彈出該介面了，修改server地址為你電腦上的ip地址加埠。

這樣，執行程式是沒問題了。

但是我們需要將其打包進apk，所以就需要用到打包命令。

打包Bundle

進入AwesomeProject目錄，命令列執行

react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output C:\Users\Administrator\Desktop\AwesomeProject\android\app\build\intermediates\assets\release\index.android.bundle –assets-dest C:\Users\Administrator\Desktop\AwesomeProject\android\app\build\intermediates\res\merged\release

如果這裡你報錯了，類似下面的錯誤

C:\Users\Administrator\Desktop\AwesomeProject>react-native bundle --platform and
roid --dev false --entry-file index.android.js --bundle-output C:\Users\Administ
rator\Desktop\AwesomeProject\android\app\build\intermediates\assets\release\inde
x.android.bundle --assets-dest C:\Users\Administrator\Desktop\AwesomeProject\and
roid\app\build\intermediates\res\merged\release
C:\Users\Administrator\Desktop\AwesomeProject\node_modules\promise\lib\done.js:1
0
      throw err;
      ^

Error: Took too long to start server. Server logs:
Wed, 18 Nov 2015 05:38:45 GMT ReactNativePackager:SocketServer server got ipc me
ssage { type: 'createSocketServer',
  data:
   { sockPath: 'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\react-packager-2bca40
9637da75daf8b8a17b9bdf33aa',
     options:
      { projectRoots: [Object],
        assetRoots: [],
        blacklistRE: [Object],
        transformModulePath: 'C:\\Users\\Administrator\\Desktop\\AwesomeProject\
\node_modules\\react-native\\packager\\transformer.js' } } }
[13:38:45] <START> Building Dependency Graph
[13:38:45] <START> Crawling File System
[13:38:45] <START> Loading bundles layout
[13:38:45] <END>   Loading bundles layout (1ms)
Wed, 18 Nov 2015 05:38:45 GMT ReactNativePackager:SocketServer error creating se
rver EACCES
Wed, 18 Nov 2015 05:38:45 GMT ReactNativePackager:SocketServer uncaught error Er
ror: listen EACCES C:\Users\ADMINI~1\AppData\Local\Temp\react-packager-2bca40963
7da75daf8b8a17b9bdf33aa
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1221:19)
    at listen (net.js:1270:10)
    at Server.listen (net.js:1360:5)
    at new SocketServer (C:/Users/Administrator/Desktop/AwesomeProject/node_modu
les/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:24:
18)
    at process.<anonymous> (C:/Users/Administrator/Desktop/AwesomeProject/node_m
odules/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:
177:7)
    at emitTwo (events.js:87:13)
    at process.emit (events.js:172:7)
    at handleMessage (internal/child_process.js:686:10)
Wed, 18 Nov 2015 05:41:12 GMT ReactNativePackager:SocketServer server got ipc me
ssage { type: 'createSocketServer',
  data:
   { sockPath: 'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\react-packager-2bca40
9637da75daf8b8a17b9bdf33aa',
     options:
      { projectRoots: [Object],
        assetRoots: [],
        blacklistRE: [Object],
        transformModulePath: 'C:\\Users\\Administrator\\Desktop\\AwesomeProject\
\node_modules\\react-native\\packager\\transformer.js' } } }
[13:41:12] <START> Building Dependency Graph
[13:41:12] <START> Crawling File System
[13:41:12] <START> Loading bundles layout
[13:41:12] <END>   Loading bundles layout (1ms)
Wed, 18 Nov 2015 05:41:12 GMT ReactNativePackager:SocketServer error creating se
rver EACCES
Wed, 18 Nov 2015 05:41:12 GMT ReactNativePackager:SocketServer uncaught error Er
ror: listen EACCES C:\Users\ADMINI~1\AppData\Local\Temp\react-packager-2bca40963
7da75daf8b8a17b9bdf33aa
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1221:19)
    at listen (net.js:1270:10)
    at Server.listen (net.js:1360:5)
    at new SocketServer (C:/Users/Administrator/Desktop/AwesomeProject/node_modu
les/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:24:
18)
    at process.<anonymous> (C:/Users/Administrator/Desktop/AwesomeProject/node_m
odules/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:
177:7)
    at emitTwo (events.js:87:13)
    at process.emit (events.js:172:7)
    at handleMessage (internal/child_process.js:686:10)
Wed, 18 Nov 2015 05:43:57 GMT ReactNativePackager:SocketServer server got ipc me
ssage { type: 'createSocketServer',
  data:
   { sockPath: 'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\react-packager-2bca40
9637da75daf8b8a17b9bdf33aa',
     options:
      { projectRoots: [Object],
        assetRoots: [],
        blacklistRE: [Object],
        transformModulePath: 'C:\\Users\\Administrator\\Desktop\\AwesomeProject\
\node_modules\\react-native\\packager\\transformer.js' } } }
[13:43:57] <START> Building Dependency Graph
[13:43:57] <START> Crawling File System
[13:43:57] <START> Loading bundles layout
[13:43:57] <END>   Loading bundles layout (1ms)
Wed, 18 Nov 2015 05:43:57 GMT ReactNativePackager:SocketServer error creating se
rver EACCES
Wed, 18 Nov 2015 05:43:57 GMT ReactNativePackager:SocketServer uncaught error Er
ror: listen EACCES C:\Users\ADMINI~1\AppData\Local\Temp\react-packager-2bca40963
7da75daf8b8a17b9bdf33aa
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1221:19)
    at listen (net.js:1270:10)
    at Server.listen (net.js:1360:5)
    at new SocketServer (C:/Users/Administrator/Desktop/AwesomeProject/node_modu
les/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:24:
18)
    at process.<anonymous> (C:/Users/Administrator/Desktop/AwesomeProject/node_m
odules/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:
177:7)
    at emitTwo (events.js:87:13)
    at process.emit (events.js:172:7)
    at handleMessage (internal/child_process.js:686:10)
Wed, 18 Nov 2015 05:55:30 GMT ReactNativePackager:SocketServer server got ipc me
ssage { type: 'createSocketServer',
  data:
   { sockPath: 'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\react-packager-2bca40
9637da75daf8b8a17b9bdf33aa',
     options:
      { projectRoots: [Object],
        assetRoots: [],
        blacklistRE: [Object],
        transformModulePath: 'C:\\Users\\Administrator\\Desktop\\AwesomeProject\
\node_modules\\react-native\\packager\\transformer.js' } } }
[13:55:30] <START> Building Dependency Graph
[13:55:31] <START> Crawling File System
[13:55:31] <START> Loading bundles layout
[13:55:31] <END>   Loading bundles layout (0ms)
Wed, 18 Nov 2015 05:55:31 GMT ReactNativePackager:SocketServer error creating se
rver EACCES
Wed, 18 Nov 2015 05:55:31 GMT ReactNativePackager:SocketServer uncaught error Er
ror: listen EACCES C:\Users\ADMINI~1\AppData\Local\Temp\react-packager-2bca40963
7da75daf8b8a17b9bdf33aa
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1221:19)
    at listen (net.js:1270:10)
    at Server.listen (net.js:1360:5)
    at new SocketServer (C:/Users/Administrator/Desktop/AwesomeProject/node_modu
les/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:24:
18)
    at process.<anonymous> (C:/Users/Administrator/Desktop/AwesomeProject/node_m
odules/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:
177:7)
    at emitTwo (events.js:87:13)
    at process.emit (events.js:172:7)
    at handleMessage (internal/child_process.js:686:10)
Wed, 18 Nov 2015 05:57:02 GMT ReactNativePackager:SocketServer server got ipc me
ssage { type: 'createSocketServer',
  data:
   { sockPath: 'C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\react-packager-2bca40
9637da75daf8b8a17b9bdf33aa',
     options:
      { projectRoots: [Object],
        assetRoots: [],
        blacklistRE: [Object],
        transformModulePath: 'C:\\Users\\Administrator\\Desktop\\AwesomeProject\
\node_modules\\react-native\\packager\\transformer.js' } } }
[13:57:02] <START> Building Dependency Graph
[13:57:02] <START> Crawling File System
[13:57:02] <START> Loading bundles layout
[13:57:02] <END>   Loading bundles layout (0ms)
Wed, 18 Nov 2015 05:57:02 GMT ReactNativePackager:SocketServer error creating se
rver EACCES
Wed, 18 Nov 2015 05:57:02 GMT ReactNativePackager:SocketServer uncaught error Er
ror: listen EACCES C:\Users\ADMINI~1\AppData\Local\Temp\react-packager-2bca40963
7da75daf8b8a17b9bdf33aa
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1221:19)
    at listen (net.js:1270:10)
    at Server.listen (net.js:1360:5)
    at new SocketServer (C:/Users/Administrator/Desktop/AwesomeProject/node_modu
les/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:24:
18)
    at process.<anonymous> (C:/Users/Administrator/Desktop/AwesomeProject/node_m
odules/react-native/packager/react-packager/src/SocketInterface/SocketServer.js:
177:7)
    at emitTwo (events.js:87:13)
    at process.emit (events.js:172:7)
    at handleMessage (internal/child_process.js:686:10)

    at [object Object]._onTimeout (C:/Users/Administrator/Desktop/AwesomeProject
/node_modules/react-native/packager/react-packager/src/SocketInterface/index.js:
82:7)
    at Timer.listOnTimeout (timers.js:92:15)

解決方法就是修改AwesomeProject/node_modules/react-native/packager/react-packager/src/SocketInterface/index.js檔案中40行附件的

  const sockPath = path.join(
    tmpdir,
    'react-packager-' + hash.digest('hex')
  );

為下面的內容


  let sockPath = path.join(
    tmpdir,
    'react-packager-' + hash.digest('hex')
  );
  if (process.platform==='win32'){
    sockPath = sockPath.replace(/^\//, '')
    sockPath = sockPath.replace(/\//g, '-')
    sockPath = '\\\\.\\pipe\\' + sockPath
  }

之後將生成的index.android.bundle拷到assets目錄即可。

這裡也有一個深坑。

Android Studio中，android目錄下的build.gradle會使用react.gradle，該檔案中就是打包bundle的task

def config = project.hasProperty("react") ? project.react : [];

def bundleAssetName = config.bundleAssetName ?: "index.android.bundle"
def entryFile = config.entryFile ?: "index.android.js"

// because elvis operator
def elvisFile(thing) {
    return thing ? file(thing) : null;
}

def reactRoot = elvisFile(config.root) ?: file("../../")
def jsBundleDirDebug = elvisFile(config.jsBundleDirDebug) ?:
        file("$buildDir/intermediates/assets/debug")
def jsBundleDirRelease = elvisFile(config.jsBundleDirRelease) ?:
        file("$buildDir/intermediates/assets/release")
def resourcesDirDebug = elvisFile(config.resourcesDirDebug) ?:
        file("$buildDir/intermediates/res/merged/debug")
def resourcesDirRelease = elvisFile(config.resourcesDirRelease) ?:
        file("$buildDir/intermediates/res/merged/release")
def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"]

def jsBundleFileDebug = file("$jsBundleDirDebug/$bundleAssetName")
def jsBundleFileRelease = file("$jsBundleDirRelease/$bundleAssetName")

task bundleDebugJsAndAssets(type: Exec) {
    // create dirs if they are not there (e.g. the "clean" task just ran)
    doFirst {
        jsBundleDirDebug.mkdirs()
        resourcesDirDebug.mkdirs()
    }

    // set up inputs and outputs so gradle can cache the result
    inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
    outputs.dir jsBundleDirDebug
    outputs.dir resourcesDirDebug

    // set up the call to the react-native cli
    workingDir reactRoot
    commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file",
            entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug

    enabled config.bundleInDebug ?: false
}

task bundleReleaseJsAndAssets(type: Exec) {
    // create dirs if they are not there (e.g. the "clean" task just ran)
    doFirst {
        jsBundleDirRelease.mkdirs()
        resourcesDirRelease.mkdirs()
    }

    // set up inputs and outputs so gradle can cache the result
    inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
    outputs.dir jsBundleDirRelease
    outputs.dir resourcesDirRelease

    // set up the call to the react-native cli
    workingDir reactRoot
    commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
            entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease

    enabled config.bundleInRelease ?: true
}

gradle.projectsEvaluated {
    // hook bundleDebugJsAndAssets into the android build process
    bundleDebugJsAndAssets.dependsOn mergeDebugResources
    bundleDebugJsAndAssets.dependsOn mergeDebugAssets
    processDebugResources.dependsOn bundleDebugJsAndAssets

    // hook bundleReleaseJsAndAssets into the android build process
    bundleReleaseJsAndAssets.dependsOn mergeReleaseResources
    bundleReleaseJsAndAssets.dependsOn mergeReleaseAssets
    processReleaseResources.dependsOn bundleReleaseJsAndAssets
}

如果我們執行bundleReleaseJsAndAssets，或者bundleDebugJsAndAssets這兩個task，不知道什麼原因，總是報錯，但是將對應的命令

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output C:\Users\Administrator\Desktop\AwesomeProject\android\app\build\intermediates\assets\release\index.android.bundle --assets-dest C:\Users\Administrator\Desktop\AwesomeProject\android\app\build\intermediates\res\merged\release

複製到命令列執行，卻是可以生成bundle檔案的，然而上面的兩個task最終執行的就是這條命令，但是無論怎麼樣它就是報錯，最後無奈只能命令列生成，也無傷什麼大雅。

如果知道這個問題原因是什麼的，也請告知！

相關推薦

記一次在Windows上搭建React Native Android環境踩過的坑

要說最近技術圈什麼比較活躍，我想除了動態載入框架和熱修復技術之外，非Facebook的React Native莫屬了吧，其實RN對IOS的支援比較早，但是Android似乎難產了，直到9月份才剛開源。距離RN開源也有一段時間了，一直沒有去學習，今天興趣來潮，索性

Windows上搭建React-Native開發環境

技術是進步的，如果你還在為糾結學習Android還是IOS，那麼你已經OUT了，這是網友說的。React-Native怎麼樣我還不知道，只知道要學習這個東西。今天給大家說一說，如何在Windows上搭建React-Native的開發環境。 第一步：如果你是An

一步一步在Windows下搭建React Native Android開發環境

搭建JAVA開發環境根據作業系統分為x86或x64位的，下載jdk1.8以上的版本，本機安裝時的java版本：jdk-8u45-windows-x64.exe配置JAVA的環境變數JAVA_HOME = C:\Program Files\Java\jdk1.8.0_45 CL

Android之Windows下搭建React Native Android開發環境（差不多搞了一天）

Android之Windows下搭建React Native Android開發環境               窮逼買不起mac,但是他們都說React Native Android只能在mac下面執行，然後到網上各種找資料看能不能在Windows下面搭建開發環境，找了幾

在windows下搭建React Native Android開發環境

ps1 doc cmd pro oot col exec 包管理工具 ocs 1.登錄 React Native 中文網http://reactnative.cn/docs/0.45/getting-started.html 2.登錄 Chocolatey 下載包管理工具h

【React Native系列教程】Windows平臺搭建React Native開發環境

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72454037) 告訴大家一個好訊息，為大家精心準備的React Native視訊教程釋出了，大家

在Windows下搭建React Native Android開發環境和第一個專案建立執行

總結rn必須的依賴安裝 必須準備的安裝依賴有：Node、React Native 命令列工具、Python2 以及 JDK 和 Android Studio。 雖然你可以使用任何編輯器來開發應用（編寫 js 程式碼），但你仍然必須安裝 Android Stud

在Mac上搭建React Native開發環境

概述 前面我們介紹過在window環境下開發React Native專案，今天說說怎麼在mac上搭建一個RN的開發環境。 配置mac開發環境 基本環境安裝 1.先安裝Homebrew：用於安裝NodeJS和其他工具。 注：Homebrew詳

Windows下搭建react-native開發環境

最近公司沒有什麼事情,所以決定研究一下react-native.react-native是Facebook研發的一種用於移動端研發hybrid app 的技術(研究的不深,目前只知道這個作用),那麼對於react-native的環境搭建卻是有些複雜.那麼對於剛剛完成環境搭建的

react-native —— 在Mac上搭建React Native Android開發環境

需要：JDK，Android SDK，Node.js 1.安裝JDK 2.安裝Android SDK 雖然現在谷歌推薦使用Android Studio，但是我還是選擇了單獨安裝Android SDK。 這是一個比較全的目錄，上面的連結是官方的，有wall，用下面的基本都是網盤資源，速度

Mac上搭建React Native Android開發環境並執行

在執行命令 需要使用vpn，才能安裝成功，國內網路受限。 nvm install node 最後執行命令 npm install -g react-native-cli 執行命令 可以建立工程 這個過程是比較慢 react-nati

在Windows下搭建React Native Android開發環境(加入下載連結)

1.安裝JDK 從Java官網下載JDK並安裝。請注意選擇x86還是x64版本。 推薦將JDK的bin目錄加入系統PATH環境變數。 - 官網連結：http://www.oracle.com/technetwork/java/javase/dow

react native(android除錯)踩的坑

錯誤一： 原因是：你使用的react native版本過新，新版本中已經刪除了React.createClass，所以建議使用es6語法，可以去學習阮一峰es6教程。   問題二： 具體錯誤我也說不清，你可以看看你的程式碼中是不是隻定義了一個元件，並沒有export，

詳細講解如何在windows下搭建react-native的開發環境(包括在裝置上安裝和執行react-native app )!

  我之前在增加完變數後,react-native命令不起作用了,後來重新安裝react-native解決了此問題. 開啟安裝好的android stdio，然後start一個專案，下一步下一步,然後找到這個按鈕，這個是啟動模擬器的鍵，如果沒有安裝模擬器的話，可以選一個手機型號來下載,找到對應你的電腦的

Windows搭建React Native開發環境

win 9.png 技術 src alt blog nat -1 bsp 成功部署 Windows搭建React Native開發環境

2018.10月，搭建windows下的React Native開發環境

我是根據react native中文網教程https://reactnative.cn/docs/getting-started.html進行搭建 react native必須安裝的依賴有：Node、React Native 命令列工具、Python2 以及 JDK 和 Android St

記一次godaddy上同一虛擬主機上部署多站

題外話，專案上的一些感觸：非同步處理的目的不是為了聽起來很高階，而是為了更快速的響應客戶端且在背地裡準確的完成業務處理。 前提：你的主機支援多站部署，有的伺服器產品型別不支援。比如我的是godady的虛擬主機的旗艦版。 如果你有兩個域名，其中一個a.com已經部署在了go

記一次redis叢集搭建的問題處理

1.複製3份conf檔案，用來起不同埠的3個redis應用 修改conf： port 6399 bind 10.61.70.136 183.61.70.136 dir /data/redis/data/ 2.分別將3個redis啟動起來 ./redis-server ../con

記一次伺服器上配置GPU版本tensorflow的經歷

早就耳聞tensorflow-gpu與CUDA，cudnn三者之間版本匹配很複雜，今天算是見識到了。 首先看了下伺服器上的CUDA、cudnn版本，分別是CUDA8.0，cudnn7.0.4 這個匹配很奇怪，一般都是CUDA8 + cudnn6或者 CUDA9 + cudnn7 後來知

記一次使用Tensorflow搭建神經網路模型經歷

隱去背景, 作者最近第一次用Tensorflow實現訓練了幾個模型, 其中遇到了一些錯誤, 把它記錄下來 前言 以下提到的所有程式碼, 都可以在github上面找到. 倉庫地址 https://github.com/spxcds/neural_network_code/ 這個倉庫裡提到的幾段程式碼, 分