1. 程式人生 > >React Native入門教程 1 -- 開發環境搭建

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
點選這裡下載Cmder

準備環境

前提你需要有一個搭建好的Android Studio環境,這裡想必就不用多說了。

需要安裝的有:

  1. python 2(不可以是3)
  2. Node.js
  3. 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

如果你喜歡我的部落格,歡迎評論和關注!謝謝 歡迎加入React Native討論群 : 120663591