【轉】在Windows下搭建React Native Android開發環境


http://www.jianshu.com/p/2fdc4655ddf8

 

安裝JDK

Java官網下載JDK並安裝。請注意選擇x86還是x64版本。

推薦將JDK的bin目錄加入系統PATH環境變量。

安裝Android SDK

可以單獨安裝Android SDK,也可以通過Eclipse ADT或者Android Studio一並安裝。推薦使用Android Studio,以下說明會默認以Android Studio的方式說明。請注意選擇x86還是x64版本。

為了加速下載,推薦從AndroidDevTools下載。

然后進入SDKManager(可通過Android Studio菜單Tools-Android-SDK Manager),確保以下項目已經安裝並更新到最新:

  • Tools/Android SDK Tools (24.3.3)

  • Tools/Android SDK Platform-tools (22)

  • Tools/Android SDK Build-tools (23.0.1)

  • Android 6.0 (API 23)/SDK Platform (1)

  • Extras/Android Support Library(23.0.1)

推薦使用騰訊Bugly的鏡像加速下載。查看說明

推薦將SDK的platform-tools子目錄加入系統PATH環境變量。

 

 

安裝Git

下載Git,記得把git.exe的路徑寫入系統環境變量,因為在執行react-native init命名時會調用git去下載react-native的源碼。

安裝Python並配置環境變量

https://www.python.org/downloads/release/python-2711/

要配置環境變量,否則報錯

 

安裝C++環境

推薦從itellyou下載並安裝Visual Studio 2013或2015。也可選擇Windows SDK、cygwin或mingw等其他C++環境。編譯node.js的C++模塊時需要用到。

安裝node.js

官網下載node.js的官方4.1版本或更高版本。npm(node package manager)是隨着node.js就安裝好的,為了加速安裝其他的package,在cmd里輸入以下命令:

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

 

安裝react-native命令行工具

npm install -g react-native-cli

 

創建react-native android項目

react-native init MyProject

這一步要等上很長時間,原因不明。不想等待的話可以在這里下載項目文件,然后將android目錄下的gradle.properties文件中的sdk.dir設為本機上sdk的目錄。

sdk.dir=F:\\android\\sdk

 

啟動react-native服務

進入項目文件夾,輸入啟動命令

react-native start

在瀏覽器中訪問地址:http://localhost:8081/index.android.bundle?platform=android
第一次訪問需要騷等一會,這是在生成android的bundle文件。cmd窗口別關,一直保持開啟狀態。

 

在模擬器中運行

進入項目目錄,輸入命令:

react-native run-android

第一次運行時會需要下載一些東西,等待就行。
build成功后便會在模擬器上自動運行了

 

 

D:\Workspace\ReactNative\Android>react-native init MyProject
This will walk you through creating a new React Native project in D:\Workspace\R
eactNative\Android\MyProject
Installing react-native package from npm...

> utf-8-validate@1.2.1 install D:\Workspace\ReactNative\Android\MyProject\node_m
odules\react-native\node_modules\ws\node_modules\utf-8-validate
> node-gyp rebuild


D:\Workspace\ReactNative\Android\MyProject\node_modules\react-native\node_module
s\ws\node_modules\utf-8-validate>if not defined npm_config_node_gyp (node "D:\Pr
ogramFiles\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp
\bin\node-gyp.js" rebuild )  else (node  rebuild )

> bufferutil@1.2.1 install D:\Workspace\ReactNative\Android\MyProject\node_modul
es\react-native\node_modules\ws\node_modules\bufferutil
> node-gyp rebuild


D:\Workspace\ReactNative\Android\MyProject\node_modules\react-native\node_module
s\ws\node_modules\bufferutil>if not defined npm_config_node_gyp (node "D:\Progra
mFiles\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin
\node-gyp.js" rebuild )  else (node  rebuild )

gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYT
HON env variable.
gyp ERR! stack     at failNoPython (D:\ProgramFiles\nodejs\node_modules\npm\node
_modules\node-gyp\lib\configure.js:116:14)
gyp ERR! stack     at D:\ProgramFiles\nodejs\node_modules\npm\node_modules\node-
gyp\lib\configure.js:71:11
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Windows_NT 6.1.7600
gyp ERR! command "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\
\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd D:\Workspace\ReactNative\Android\MyProject\node_modules\react-nativ
e\node_modules\ws\node_modules\utf-8-validate
gyp ERR! node -v v4.2.6
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYT
HON env variable.
gyp ERR! stack     at failNoPython (D:\ProgramFiles\nodejs\node_modules\npm\node
_modules\node-gyp\lib\configure.js:116:14)
gyp ERR! stack     at D:\ProgramFiles\nodejs\node_modules\npm\node_modules\node-
gyp\lib\configure.js:71:11
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Windows_NT 6.1.7600
gyp ERR! command "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\
\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd D:\Workspace\ReactNative\Android\MyProject\node_modules\react-nativ
e\node_modules\ws\node_modules\bufferutil
gyp ERR! node -v v4.2.6
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok
npm WARN optional dep failed, continuing utf-8-validate@1.2.1
npm WARN optional dep failed, continuing bufferutil@1.2.1

`npm install --save react-native` failed

D:\Workspace\ReactNative\Android>

 

如果是連真機的話,很大可能看到的結果是一片白啊一片白。經查,發現是安全中心中的“懸浮窗”權限並沒有對我們的這個新app開放,那么將權限開放,重啟app,啊呀,一片紅啊一片紅。。。長按物理菜單鍵或者死命搖一搖手機,會彈出一個小窗口,選擇“Dev Settings”,然后選擇“Debug server host for device”,會彈出一個輸入框,輸入電腦ip地址和默認的8081端口,再次重新app,啊呀,粗線了粗線了。。。

 

但是由於npm上的版本在windows下存在BUG,因此需要安裝github上的master支線,否則會在下一步驟報以下錯誤:

This will walk you through creating a new React Native project in *** events.js:141       throw er; // Unhandled 'error' event       ^ Error: spawn npm ENOENT     at exports._errnoException (util.js:837:11)     at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)     at onErrorNT (internal/child_process.js:344:16)     at doNTCallback2 (node.js:429:9)     at process._tickCallback (node.js:343:17)     at Function.Module.runMain (module.js:477:11)     at startup (node.js:117:18)     at node.js:951:3

 

如果您看到本文時0.12已經發布,那很可能直接輸入上面的命令就行了。如果0.12還沒有發布,請進行以下步驟:

React Native的Github頁面右側點擊Download ZIP,下載后解壓,並執行以下代碼:

cd **解壓的目錄** cd react-native-cli npm install -g

 

創建項目

進入你的工作目錄,運行

react-native init MyProject

 

並耐心等待數分鍾。

運行packager

首先要修復package在windows下的兩處BUG。

1、參考這個commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/Module.js的getName()方法中,將

return path.join(name, path.relative(p.root, this.path));

 

修改為

return path.join(name, path.relative(p.root, this.path)).replace(/\\/g, '/');

 

注意,如果你在修改此行代碼之前運行過packager,那你可能需要去C:\Users\你的用戶名\AppData\Local\Temp中找到並刪除所有 react-packager-cache 開頭的文件。

2、參考這個commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js的_resolveNodeDependency(fromModule, toModuleName)方法中,將

for (let currDir = path.dirname(fromModule.path);                 currDir !== '/';                 currDir = path.dirname(currDir)) {

 

修改為

for (let currDir = path.dirname(fromModule.path);                 path.dirname(currDir) != currDir;                 currDir = path.dirname(currDir)) {

 

隨后可以運行packager。

如果你有cygwin,可以在cygwin環境中進入工程目錄,運行

npm start

 

如果沒有cygwin或不在cygwin環境中,可以進入工程目錄,運行

node node_modules\react-native\packager\packager.js

 

可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本。第一次訪問通常需要十幾秒,並且在packager的命令行可以看到進度條。如果遲遲看不到進度條,請檢查上面的修改是否已經做到。

運行模擬器

推薦使用BlueStacks不過要小心它推送的廣告和垃圾應用。

如果有真機,可以不必運行模擬器,要配置好驅動,使得adb devices可以看到對應的設備。

安卓運行

保持packager開啟,另外打開一個命令行窗口,然后在工程目錄下運行

react-native run-android

 

首次運行需要等待數分鍾並從網上下載gradle依賴。

運行完畢后可以在模擬器或真機上看到應用自動啟動了。

如果gradle依賴下載出現報錯,請多試幾次,或者設置VPN加速。

如果apk安裝運行出現報錯,請檢查platform-tools是否已經設到了PATH環境變量中,運行adb devices能否看到設備。

至此,應該能看到APP運行,並報錯 Unable to download JS bundle

搖晃設備或按Menu鍵(Bluestacks模擬器按鍵盤上的菜單鍵,通常在右Ctrl的左邊 或者左Windows鍵旁邊),可以打開調試菜單,點擊Dev Settings,選Debug server host for device,輸入你的局域網IP,再按back鍵返回,再按Menu鍵,在調試菜單中選擇Reload JS,就應該可以看到運行的結果了。

安卓調試

目前Windows下無法自動打開chrome進行調試,所以手動打開chrome,訪問如下地址:http://localhost:8081/debugger-ui 即可。

 

=====================================================================

已按該教程搭建完成。以下是截圖


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM