ReactNative開發之旅—開發環境搭建

最新 09-12

新媒體管家

前言介紹

ReactNative的了解和開發環境的搭建

博文地址：

正文

Window系統下搭建RN開發環境寫這篇博客，我刪除了本機器上所有有關RN的開發工具，重頭來過。第一，為了加深自己的印象。第二，博客可能寫的更好，更詳細吧，也為了新手可以更好的理解。RN開發所需要的工具：

一、Node.js

官網地址：https://nodejs.org/en/打開後選擇下載，我下載的是Current版本的

下載完成後是一個node-v7.8.0-x64.msi文件，然後雙擊一路狂next即可如果驗證nodeJS工作是否正常,cmd 輸入node -v 和 npm -v查看版本號

此時注意下環境變數，發現默認的已經添加了node path路徑了，所以node 和 npm 命令才有效

設置npm鏡像，複製以下兩行命令粘貼執行npm config set registryhttps://registry.npm.taobao.orgnpm config set disturlhttps://npm.taobao.org/dist

二、React Native

官網地址：https://github.com/facebook/react-native打開後，download下載

然後解壓，目錄結構如下

在當前目錄也就是下載到本地的react-native目錄中，執行npm install -g react-native-cli，完成後如下圖

校驗是否成功，執行react-native -v命令查看

三、初始化Demo並運行

開發環境基本搞定，至於JDK，SDK這些，都是必要的。開始初始化項目，在一個空的文件夾下，執行react-native init one_demo命令後，經過漫長的等待，最後來到下圖

項目初始化成功，進入到項目的根目錄下開始運行項目 react-native run-android，中間需要翻牆，這裡推薦使用免費的VPN工具藍燈https://www.getlantern.org/這個過程第一次會非常緩慢，也有可能出錯，出錯的地方無非就是sdk找不到，或者support 版本過低等。直到，看到build successful說明一切ok了。

此時手機顯示會是這個樣子的

那是因為我們的包伺服器沒打開，我們在初始化項目的根目錄下執行 npm start

然後在手機上按menu實體按鍵，此時彈出選擇提示，有些手機是搖晃激活的

選擇dev settings，然後在debug server host & port for device 設置我們電腦本機的代理

完成後，點擊確定，然後在按menu實體按鍵，選擇Reload，我們注意觀察剛才啟動的包伺服器的命令窗口已經開始在響應了。

執行到了100%，我們的手機界面也成功顯示出來

好了，window下RN開發環境到此搭建完畢。

加入猿圈：