上一章已經(jīng)講了如何搭建開發(fā)環(huán)境,如果你還不清楚如何搭建環(huán)境請先移步搭建開發(fā)環(huán)境，現(xiàn)在就來使用RN開發(fā)出你的第一個Hello Wrold吧。
- 首先初始化一個項(xiàng)目
打開命令行窗口，進(jìn)入我們希望建立的項(xiàng)目文件的父目錄:
(如 cd /Users/file/Desktop/reactnative)
進(jìn)入父目錄后輸入命令：
react-native init ReactNative
其中ReactNative表示你希望建立的工程名，第一次建立會比較慢，慢的程度取決于你網(wǎng)速，在mac下會更慢，因?yàn)樗麜瑫r下載android和ios平臺的所需數(shù)據(jù)，請耐心等待。
當(dāng)出現(xiàn)如下圖所示，則表示初始化成功，
大家可以去剛才指定的文件目錄看到已經(jīng)初始化完成的項(xiàng)目文件，項(xiàng)目結(jié)構(gòu)如下圖所示，分別有android和ios工程文件，然后使用命令行窗口進(jìn)入此目錄下cd ReactNative,然后執(zhí)行升級命令：
react-native upgrade
接下來就我們就把這個RN項(xiàng)目運(yùn)行起來了，android的話建議大家使用android手機(jī)調(diào)試，IOS的話用自帶的模擬器。
運(yùn)行在android平臺
首先把數(shù)據(jù)線連接上電腦和你的android手機(jī)，手機(jī)請打開開發(fā)者模式的usb調(diào)試。然后在命令行輸入命令:adb device 如果手機(jī)連接正確，會看到如下顯示：
list of devices attached
637b3a75 device
如沒有顯示，則表示沒有連接成功，無法調(diào)試，如果你的測試機(jī)是android5.0以上的系統(tǒng)，還需要輸入如下命令：
adb reverse tcp:8081 tcp:8081
這條命令是通過adb反向代理端口，將電腦的8081端口反向代理到測試機(jī)上。
如果測試是5.0一下則不需要執(zhí)行以上命令。
然后在安裝目錄下輸入命令
react-native run-android
此命令會編譯android項(xiàng)目并將安裝包安裝到你的測試機(jī)中，此命令第一次輸入的時間可能會比較長，之后就會很快了。
如果你使用的是Windows系統(tǒng)，程序安裝好之后在手機(jī)上會顯示紅色屏幕，這是因?yàn)殡娔X上的服務(wù)環(huán)境還沒有啟動，請?jiān)谠诿钚休斎朊睿?/p>
react-native start
如果使用的測試機(jī)或模擬器低于5.0版本也會顯示紅色屏幕，按下menu鍵或者搖動手機(jī)，會在屏幕上彈出菜單，然后選擇"Dev Setting"，在選擇"Debug server host&port for device"，在彈出框中輸入當(dāng)前電腦的ip地址,（如不知道地址在命令行輸入ipconfig可以找到)，如當(dāng)前IP為192.168.1.5，就在輸入框中輸入192.168.1.5:8081點(diǎn)擊確定返回紅色界面在點(diǎn)擊Reload JavaScript按鈕，這時界面就應(yīng)該出來了。
如果運(yùn)行中出現(xiàn)如下圖錯誤，則需要在android目錄下加入local.properties文件，如果你有原來運(yùn)行過的android工程則可以直接拷貝過來就行了。
如果沒有則自己創(chuàng)建一個,在里面輸入：
sdk.dir=你的android SDK路徑 如:(/Users/koala/Library/Android/sdk)
- 注：android5.0以上的手機(jī)每次運(yùn)行都需要輸入adb reverse tcp:8081 tcp:8081命令和react-native start命令
運(yùn)行在IOS平臺
使用ios平臺相對比android容易很多
首先進(jìn)入你剛才創(chuàng)建的ReactNative文件，進(jìn)入ios子目錄，點(diǎn)擊Xcode工程文件，啟動Xcode，xcode工程文件如下圖所示:
Xcode啟動起來以后，你會看到如下圖所示，
點(diǎn)擊運(yùn)行按鈕，選擇需要的調(diào)試機(jī)器，然后模擬器就會啟動起來了。
同時會啟動起來的還有一個命令行窗口這個窗口是調(diào)試服務(wù)器窗口，這個窗口不能關(guān)閉。
如果不出意外的話，你就會在你的模擬器上看到如下圖所示，則表示你的RN項(xiàng)目運(yùn)行成功了！
如果你使用iphone手機(jī)調(diào)試的話會比較麻煩，詳情請參閱在真機(jī)上運(yùn)行
ps:關(guān)注ReactNative開發(fā)經(jīng)驗(yàn)集，那里有更多的小伙伴和更豐富的RN學(xué)習(xí)資源！
