上一章已經(jīng)講了如何搭建開發(fā)環(huán)境,如果你還不清楚如何搭建環(huán)境請(qǐng)先移步搭建開發(fā)環(huán)境舆乔，現(xiàn)在就來使用RN開發(fā)出你的第一個(gè)Hello Wrold吧。
- 首先初始化一個(gè)項(xiàng)目
打開命令行窗口，進(jìn)入我們希望建立的項(xiàng)目文件的父目錄:
(如 cd /Users/file/Desktop/reactnative)
進(jìn)入父目錄后輸入命令：
react-native init ReactNative
其中ReactNative表示你希望建立的工程名兜材，第一次建立會(huì)比較慢，慢的程度取決于你網(wǎng)速逞力，在mac下會(huì)更慢护姆，因?yàn)樗麜?huì)同時(shí)下載android和ios平臺(tái)的所需數(shù)據(jù)，請(qǐng)耐心等待掏击。
當(dāng)出現(xiàn)如下圖所示卵皂，則表示初始化成功，
大家可以去剛才指定的文件目錄看到已經(jīng)初始化完成的項(xiàng)目文件砚亭，項(xiàng)目結(jié)構(gòu)如下圖所示灯变，分別有android和ios工程文件，然后使用命令行窗口進(jìn)入此目錄下cd ReactNative,然后執(zhí)行升級(jí)命令：
react-native upgrade
接下來就我們就把這個(gè)RN項(xiàng)目運(yùn)行起來了捅膘，android的話建議大家使用android手機(jī)調(diào)試添祸，IOS的話用自帶的模擬器。
運(yùn)行在android平臺(tái)
首先把數(shù)據(jù)線連接上電腦和你的android手機(jī)寻仗，手機(jī)請(qǐng)打開開發(fā)者模式的usb調(diào)試刃泌。然后在命令行輸入命令:adb device 如果手機(jī)連接正確，會(huì)看到如下顯示：
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
此命令會(huì)編譯android項(xiàng)目并將安裝包安裝到你的測試機(jī)中铜幽，此命令第一次輸入的時(shí)間可能會(huì)比較長，之后就會(huì)很快了串稀。
如果你使用的是Windows系統(tǒng)除抛，程序安裝好之后在手機(jī)上會(huì)顯示紅色屏幕，這是因?yàn)殡娔X上的服務(wù)環(huán)境還沒有啟動(dòng)母截，請(qǐng)?jiān)谠诿钚休斎朊睿?/p>
react-native start
如果使用的測試機(jī)或模擬器低于5.0版本也會(huì)顯示紅色屏幕到忽，按下menu鍵或者搖動(dòng)手機(jī)，會(huì)在屏幕上彈出菜單微酬，然后選擇"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按鈕，這時(shí)界面就應(yīng)該出來了垦江。
如果運(yùn)行中出現(xiàn)如下圖錯(cuò)誤帽馋，則需要在android目錄下加入local.properties文件，如果你有原來運(yùn)行過的android工程則可以直接拷貝過來就行了比吭。
如果沒有則自己創(chuàng)建一個(gè),在里面輸入：
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平臺(tái)
使用ios平臺(tái)相對(duì)比android容易很多
首先進(jìn)入你剛才創(chuàng)建的ReactNative文件绽族，進(jìn)入ios子目錄，點(diǎn)擊Xcode工程文件衩藤，啟動(dòng)Xcode吧慢，xcode工程文件如下圖所示:
Xcode啟動(dòng)起來以后，你會(huì)看到如下圖所示赏表，
點(diǎn)擊運(yùn)行按鈕检诗，選擇需要的調(diào)試機(jī)器，然后模擬器就會(huì)啟動(dòng)起來了瓢剿。
同時(shí)會(huì)啟動(dòng)起來的還有一個(gè)命令行窗口這個(gè)窗口是調(diào)試服務(wù)器窗口逢慌，這個(gè)窗口不能關(guān)閉。
如果不出意外的話间狂，你就會(huì)在你的模擬器上看到如下圖所示攻泼，則表示你的RN項(xiàng)目運(yùn)行成功了！
如果你使用iphone手機(jī)調(diào)試的話會(huì)比較麻煩鉴象，詳情請(qǐng)參閱在真機(jī)上運(yùn)行
ps:關(guān)注ReactNative開發(fā)經(jīng)驗(yàn)集忙菠，那里有更多的小伙伴和更豐富的RN學(xué)習(xí)資源！
