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://rj.baidu.com/soft/detail/30195.html

安裝時主要選擇將git加入到命令行中 ,安裝好之后命令行中就有git命令。

 

安裝react-native-cli,命令行下的react-native工具

使用git下載ReactNative的項目代碼
git clone -b master 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 ,如果可以訪問表示服務器端已經可以了,瀏覽器中訪問時,剛才的命令行會顯示進度。

谷歌內核的瀏覽器中打開http://localhost:8081/debugger-ui,下載插件后,根據提示可以調試應用。

運行安卓端apk程序
編譯apk比較麻煩,后面再做介紹,為了方便起見這里提供已經編譯好的apk,使用這個apk 前面init創建工程的使用名稱保持一致:AwesomeProject。
apk下載地址:

http://git.oschina.net/zhJack/EasyReactNative/raw/master/AwesomeProject.apk

 

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

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

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

關於如何編寫js代碼,請參考api文檔和以及示例程序。

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

有什么問題可以加我的qq:1115500401

 


免責聲明!

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



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