react native windows開發環境搭建(一)

標籤：

ReactNative分為伺服器端和手機端loader程式，Android版有3種代碼：js代碼，java代碼和c++代碼，主要是編寫的是js代碼，如果架構功能不足就需要編寫原生的java代碼來擴充，c++代碼主要和js引擎有關，一般很少用到。

首先安裝node.js伺服器端，到node.js的網站上下載node.js然後安裝上就可以了。
https://nodejs.org/en/

安裝git，在執行命令的時候，需要通過git到github上去下載相關的檔案。

如下：
http://www.git-scm.com/downloads
安裝好之後命令列中就有git命令。

安裝react-native-cli，命令列下的react-native工具
使用git下載ReactNative的項目代碼
git clone https://github.com/facebook/react-native.git

切換到react-native-cli目錄
cd react-native/react-native-cli

安裝react-native-cli
npm install -g

安裝好之後，可以命令列下就有react-native命令了

執行
react-native init AwesomeProject
等待一段時間後(較慢)，建立react-native項目
建立完成執行 node node_modules\react-native\packager\packager.js 啟動服務，本人在測試時windows下存在bug，需要修改一個檔案。

在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)) {

修改後重新運行命令：node node_modules\react-native\packager\packager.js

在瀏覽器中開啟http://localhost:8081/index.android.bundle?platform=android ，如果可以訪問表示伺服器端已經可以了，瀏覽器中訪問時，剛才的命令列會顯示進度。

Google核心的瀏覽器中開啟http://localhost:8081/debugger-ui，下載外掛程式後，根據提示可以調試應用。

運行安卓端apk程式
編譯apk比較麻煩，後面再做介紹，為了方便起見這裡提供已經編譯好的apk，使用這個apk前面init建立工程的使用名稱保持一致:AwesomeProject。
apk：

安裝好apk後，按菜單鍵選擇“Dev Settings”，設定ip地址，reload，就會看到Welcome介面。
沒有菜單鍵的手機，搖晃手機就會出現菜單。

修改index.android.js中的代碼，再次relaod，就會發現介面也會改變。

當然，這樣並不能開發一個完整的應用，還需要能編譯loader以便發布和擴充應用，後面在做介紹。

關於如何編寫js代碼，請參考api文檔和以及樣本程式。

另外，本人將持續更新ReactNative相關內容，最新內容請關注我的公眾號zhaojieTec

有什麼問題可以加我的qq：1115500401

 

react native windows開發環境搭建(一)