1. react-native-ios之----20分鐘搭建環境

   歡迎你們收看react-native-ios系列教程，跟着本系列教程學習，能夠熟練掌握react-native-ios的開發，你值得擁有：

http://my.oschina.net/MrHou/blog?catalog=3617440

1 環境

---

    首先來看看，若是咱們須要開發一個react-native-ios的應用。都須要具有哪些條件吧。

1.1 nodejs

    這個是必備的，因爲是要開發react-native-ios，因此，讀着確定是在mac下開發了。直接在nodejs的官網下載LTS版本，穩定，推薦讀着使用：

https://nodejs.org/en/

下載的pkg包直接安裝便可。

1.2 react-native-cli

    這個是react-native的模塊。咱們直接經過npm安裝便可：

npm install -g react-native-cli

mac/linux下的話，可能會報錯：

npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-native-cli'

這個時候，證實你的權限不夠，能夠在命令前面加上sudo：

sudo npm install -g react-native-cli

 

1.3 xcode

    開發原生IOS應用必備的開發集成環境。能夠從app store上進行安裝。也能夠下載安裝：http://rj.baidu.com/soft/detail/40233.html?ald

 

 

2 建立項目

---

2.1 初始化項目

    咱們已經配置好了上述環境以後。就能夠開始初始化一個項目了。進入到一個乾淨的目錄下（最好在桌面上）執行命令：

react-native init helloReact

來初始化一個react-native項目，如圖2.1.1。

                                                                                    圖2.1.1

若是碰到了如下問題，那麼證實你的xcode干擾了react-native的初始化。用了beta版本或者怎樣：

xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is 

最簡單的解決辦法，就是在bash中輸入：

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

以後，就能夠看到咱們的項目初始化成功了，如圖2.1.2

                                                                                           圖2.1.2

2.2 使用xcode打開項目

這時，咱們打開xcode，選擇打開一個項目，如圖2.2.1：

                                                                            圖2.2.1

咱們選擇打開一個項目，打開咱們新建的helloReact項目下的ios目錄下helloReact.xcodeproj文件，如圖2.2.2

                                                                                    圖2.2.2

而後，就生成了咱們的IOS工程-----helloReact，如圖2.2.3：

                                            圖2.2.3

2.3 啓動react-bundle的server

直接在bash中進入到咱們的helloReact工程下。運行：

react-native start

咱們能夠看到訪問咱們react的js-bundle的server已經運行了，如圖2.3.1：

                                                                                                圖2.3.1

2.4 運行APP

點擊左上角的黑色三角(或者使用cmd+r)開始運行，如圖2.4.1

                                圖2.4.1

咱們看到，xcode正在啓動iphone的模擬器，如圖2.4.2

                                                                                    圖2.4.2

2.5 驗證效果

在一頓等待以後，咱們看到了熟悉的helloWorld，如圖2.5.1

                                                                    圖2.5.1

若是啓動過程當中，讀者發現ios模擬器卡住了。能夠在模擬器界面，從新設定一下模擬器，如圖2.5.2

                                                                    圖2.5.2

3 課後做業

---

看完了上述教程後，相信聰明的你，已經學會了如何搭建一個簡單的react-native-ios的demo，那麼這篇文章的課後做業就是本身嘗試搭建一個reactnative的helloworld。

 

不要走開，立刻回來，下一篇，咱們會介紹，如何利用js編寫咱們想要的IOS界面

原創文章,版權全部,轉載請註明出處