React Native入門教程 1 -- 開發環境搭建
有人問我為啥很久不更新部落格。。我只能說在學校宿舍真的沒有學習的環境。。基本上在宿舍裡面很頹廢。。不過要畢業找工作了,我要漸漸把這個心態調整過來,就從react-native第一篇部落格開始。話說RN也出來很久了 每次我研究都比別人晚一步
不過沒關係,意識到了就不算晚。環境搭建了幾個小時,中間很正常的遇到了一些錯誤,於是記錄下來過程和問題的解決方法,分享給大家。
為什麼要研究React Native
因為總感覺以後移動端很少有人做APP,一做就是兩種平臺的,成本太高。遲早藥丸。 所以居安思危,早點研究跨平臺的東西,由於是js寫的,以後APP死了還能輕易轉前端,何樂而不為呢。
啥叫React Native
這個東東是FaceBook研發的, 他的主要功能就是用js來編寫各個平臺的APP,他們的主旨是:
僅需學習一次,編寫任何平臺。(Learn once, write anywhere)
看起來很誘惑,是不是,快來跟我一起學習如何搭建環境。這裡給出的是windows下的Android版本,其他系統平臺應該大同小異,就不再介紹。
工欲善其事必先利其器
再安裝開發環境之前,介紹一款取代win下cmd.exe利器:Cmder。
他為windows提供了模擬Linux命令的環境,怎麼說呢,就倆字,很爽!
點選這裡下載Cmder
準備環境
前提你需要有一個搭建好的Android Studio環境,這裡想必就不用多說了。
需要安裝的有:
- python 2(不可以是3)
- Node.js
- react-native-cli(用於RN專案的建立,初始化,更新等)
python&node
首先去官網下載python2 以及 Node.js:
安裝之後 ,在cmder裡測試是否安裝正確:
鍵入python 以及 node
如果正常 則如下圖:
react-native-cli
在命令列鍵入
npm install -g react-native-cli
安裝react-native-cli。
環境變數(很重要)
除了java的環境變數外,還要新增android的環境變數:
ANDROID_HOME 以及C:\Users\Administrator\AppData\Local\Android\sdk
初始化專案
以上環境安裝完畢之後,就可以初始化專案了。
在cmder鍵入
react-native init MyProjct
來初始化專案
這裡會從網上啦一些檔案下來,需要耐心等待。。
初始化完畢之後,鍵入以下命令來開啟伺服器。
cd MyProject
react-native start
如圖,正常開啟伺服器的介面。
接下來,鍵入命令,讓專案跑起來
react-native run-android
漂亮! 我們第一個RN程式已經跑起來了。當然,如果順利的話,你會看到以上介面。。但是過程中往往不那麼順利。
遇到的錯誤總結
1. 在run-android 報錯
(1)no connected devices
這裡是沒有找到你的裝置,只需要用adb連線以下就可以了
adb connect 127.0.0.1:62001(輸入你自己模擬器的埠)
(2)
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ‘:app’.
failed to find Build Tools revision 23.0.1
這個是說 找不到Build Tools 23.0.1 所以我們開啟Android Studio的SDK Manager ,找到如下圖的下載即可
2.在run-android的時候下載gradle很慢
這個是比較通用的問題。。。 看他下載的版本,我們用迅雷去官網下一個,放到C:\Users\Administrator.gradle\wrapper\dists資料夾下,即可。
3.執行APP以後紅屏
報錯java.lang.RuntimeException:Could not connect to development server.如圖
那麼按照上面的提示,進行如下處理:
1、確保你的packager 伺服器在執行。即,鍵入瞭如下命令
react-native start
2、確保你的裝置連線到了電腦。
adb connect host:prot
3、嘗試如下命令
adb reverse tcp:8081 tcp:8081
4、在開發選項裡設定除錯IP,注意是開發選項,並不是手機的開發者選項(害我找了半個小時)。。 此時應該,點選選單鍵,其中有個Dev Setting 設定主機IP和埠即可解決。
到此,我們踏出了第一步。未來正向我們招手,加油。
參考文章:開始使用React Native