在上一篇文章，我講解了如何搭建React Native的的環(huán)境，相信聰明的你們一定已經(jīng)學(xué)會(huì)并已經(jīng)搭建好了環(huán)境，那么這一篇，我們就趁熱打鐵，一起來(lái)搞一個(gè)我們自己的React Native 項(xiàng)目吧！（我這里只講如何做iOSapp，如果需要同時(shí)做安卓app，需要搭建安卓配套環(huán)境，請(qǐng)轉(zhuǎn)步【技術(shù)貼】之-mac下安裝Android Studio）

項(xiàng)目的運(yùn)行環(huán)境

xcode 7 以上

執(zhí)行命令，生成一個(gè)工程

我們要?jiǎng)?chuàng)建一個(gè)React Native項(xiàng)目，是需要在終端中完成的，首先打開(kāi)終端，cd到我們想要放工程的目錄后，執(zhí)行下面的命令： react-native init + 項(xiàng)目名稱(chēng) (項(xiàng)目名稱(chēng)不能以數(shù)字或下劃線(xiàn)開(kāi)頭，只能以字母開(kāi)頭，這點(diǎn)大家要注意)

由于眾所周知的網(wǎng)絡(luò)原因，那我們當(dāng)然需要等一段時(shí)間去喝個(gè)酒啊，吃個(gè)烤串啊什么的，這樣回來(lái)以后我們的項(xiàng)目就基本創(chuàng)建好了，當(dāng)然也有方法可以將npm的倉(cāng)庫(kù)源替換為國(guó)內(nèi)鏡像，比如：

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

但是還是比較慢（哈哈）?

吃完燒烤喝完酒以后回來(lái)你就會(huì)發(fā)現(xiàn)我們的項(xiàng)目已經(jīng)創(chuàng)建好了

創(chuàng)建項(xiàng)目成功效果

進(jìn)入到我們的工程文件夾會(huì)出現(xiàn)下面的樣子

node_modules文件夾

android項(xiàng)目文件夾

iOS項(xiàng)目文件夾

里面會(huì)同時(shí)生成一個(gè)iOS的項(xiàng)目和一個(gè)android的項(xiàng)目，還有一個(gè)文件夾node_modules是不可缺少的，里面是存放的是react和react-native的所有組件。

下面我們就以iOS端為例子，我們用xcode來(lái)運(yùn)行iOS的項(xiàng)目（我這里用的xcode版本是7.3.1 其他版本你們自行運(yùn)行）點(diǎn)擊xcode運(yùn)行按鈕后，系統(tǒng)會(huì)自動(dòng)調(diào)用React-Native的服務(wù)器終端，就是會(huì)彈出一個(gè)終端頁(yè)面如下圖

項(xiàng)目運(yùn)行時(shí)自動(dòng)調(diào)用的react-native服務(wù)器

這個(gè)終端在運(yùn)行項(xiàng)目的時(shí)候是不能夠關(guān)閉的，關(guān)閉了它，項(xiàng)目是沒(méi)法運(yùn)行的，所以我們最小化它不去管它，然后蘋(píng)果模擬器上是這個(gè)樣子

模擬器顯示效果

如果你的也是顯示的這樣的，那恭喜你，你已經(jīng)成功的步入了月薪20k的大門(mén)，下一篇，我就要開(kāi)始講解如何寫(xiě)React Native項(xiàng)目了！