React Native入門教程 1 -- 開發環境搭建

有人問我爲啥好久不更新博客。。我只能說在學校宿舍真的沒有學習的環境。。基本上在宿舍裏面很頹廢。。不過要畢業找工做了，我要漸漸把這個心態調整過來，就從react-native第一篇博客開始。話說RN也出來好久了 每次我研究都比別人晚一步
不過不要緊，意識到了就不算晚。環境搭建了幾個小時，中間很正常的遇到了一些錯誤，因而記錄下來過程和問題的解決方法，分享給你們。

轉載請註明出處：http://blog.csdn.net/wingichoy/article/details/51791076

爲何要研究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環境，這裏想必就不用多說了。

須要安裝的有：

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.如圖

那麼按照上面的提示，進行以下處理：
一、確保你的packager 服務器在運行。即，鍵入了以下命令

react-native start

二、確保你的設備鏈接到了電腦。

adb connect host:prot

三、嘗試以下命令

adb reverse tcp:8081 tcp:8081

四、在開發選項裏設置調試IP，注意是開發選項，並非手機的開發者選項（害我找了半個小時）。。 此時應該，點擊菜單鍵，其中有個Dev Setting 設置主機IP和端口便可解決。

到此，咱們踏出了第一步。將來正向咱們招手，加油。
參考文章：開始使用React Native

若是你喜歡個人博客，歡迎評論和關注！謝謝 歡迎加入React Native討論羣 ： 120663591

下一篇：React Native入門教程(筆記) 2 – 基本組件使用及樣式（