誠然，React Native 結合了 Web 應用和 Native 應用的優勢，可以使用JavaScript 來開發 iOS 和Android原生應用。在 JavaScript 中用 React 抽象操作系統原生的 UI 組件，代替 DOM 元素來渲染等。
React Native 使你能夠使用基于 JavaScript 和 React 一致的開發體驗在本地平臺上構建世界一流的應用程序體驗。React Native 把重點放在所有開發人員關心的平臺的開發效率上——開發者只需學習一種語言就能輕易為任何平臺高效地編寫代碼。Facebook 在多個應用程序產品中使用了 React Native，并將繼續為 React Native 投資。
其好處顯而易見：減少了人力、節省了時間、避免了 iOS 與 Android 版本發布的時間差，開發新功能可以更迅速。
下面，我們可以嘗試用React Native創建一個 iOS APP.
在我們開始之前，我建議：你可以在Github里先下載 React Native 的代碼框架。里面還有一些示例項目，2048 的游戲， Movies（一個看電影的 APP）,SampleApp, TicTacToe (一款游戲)和 UIExplorer（能顯示出所有用 React Native 替代的控件，如ListView，TabBar，MapView, Slider）），對于學習用如何用 React Native 創建 UI,這些都是非常好的例子,尤其是 UIExplorer APP，它幾乎用到了每一個您的 APP 中需要創建的 UI 控件。
首先，我們先來安裝相應的工具。React native 是使用Node.js來 創建 JavaScript 代碼。如果你已經在你電腦上安裝上了這些工具，你可以跳過下面這幾步。
推薦使用Homebrew的方式來安裝 nvm，watchman 和 flow。
在Mac下，如果用homebrew，那么只用一行就可以裝好:
接下來安裝watchman
watchman是Facebook的一個文件觀察者。React Native 用它來檢測代碼的變化.
接下來安裝 npm
nmp 是 node的一個三方管理工具，相當于Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能夠輕松下載和管理你的項目需要的任何依賴庫。
在終端，找到你希望保存的項目文件，然后運行下面的文件夾。
以上使用 CLI 工具來構建一個 Native 項目，是準備建立并運行原樣。當這個過程完成后，你就會在終端窗口中打開 Xcode 的BookSearch.xcodeproj 并運行應用程序像往常一樣。做到這一點，模擬器將啟動您的應用程序的運行。一個終端窗口也將打開。當一個Native應用程序啟動時，它加載從以下網址 JavaScript 的應用程序。
http://localhost:8081/index.ios.bundle
終端被打開，服務器開始作出反應來處理上述請求。該 Native 負責讀取和建設 JSX（我們將看看這個版本）和 JavaScript 代碼。
運行這個 APP,你可以看到下圖中的模擬器，如果你想在開發運行有幾個步驟，你應該這樣做。
歡迎屏幕給出了一些關鍵的指令，你應該注意：編輯應用程序的用戶界面，你應該修改，當你創建項目時生成的 index.ios.js 文件，如果您更改 JavaScript 代碼，重新加載命令應用程序 Command-R 看到的變化，如果你想要更多的選擇，使用命令控制 Command-Control-Z 打開開發者菜單，提供了這樣的選項，使現場重新加載和瀏覽器的調試。
在任何時候做本教程時你可能會遇到一個紅色屏幕模擬器，可以檢查錯誤消息。它能讓你知道這個問題是與你的代碼還是服務器有關系。當我接收到錯誤的消息「無法連接到服務器」 在模擬器和檢查終端有一個「流程終止」 錯誤消息時我陷入了服務器連接問題。當這種情況發生時，關閉終端窗口，停止在 Xcode 中的應用并再次運行它。對于其他錯誤，是由于語法錯誤代碼中或網絡請求超時時（如果你的應用從互聯網上獲取數據），一個簡單的重新加載后修復這個問題應該怎么做。
如果你在敦促 Command-R 鍵盤但什么都沒有發生，硬件鍵盤可能沒有連接到模擬器上。選擇模擬器上的選項菜單以連接它：Hardware > Keyboard > Connect Hardware Keyboard.
如果你按上邊程序做了它依然不能重新加載，那么你可能需要重啟你的電腦。我遇到過一次突然死機，重啟電腦可以完成加載。
我們現在開始構建應用程序，打開 index.ios.js 文件。我建議使用適合 web 開發的 IDE。你還可以使用 Xcode，但你會發現它并不適合因為在代碼格式化、自動完成和語法錯誤突出顯示時它不是非常靈活。你可以通過學習本文來決定并選擇合適的 JavaScript IDE。我用過 RudbyMine，但實際上任何 IDE 都支持 JavaScript。如果你能得到一個支持 JSX 的那真很不錯。
當你打開 indx.ios.js 文件，你就會看到正在運行的應用程序構建 UI 的代碼。你可能看到以下代碼塊。
以上代碼啟用了嚴格的模式，增加了處理原生 JavaScript 代碼對錯誤的改善。
以上代碼可以加載 react-native 模塊，并將它賦予變量的反應。在你調用任何模塊之前你需要把外部模塊加載到你的文件中來。可以把它作為Swift和 Objective-C 的導入庫。
上面是一個解構賦值，你可以通過它將多個對象屬性分配給一個變量。這能讓他們在文件作用域被引用。以上是可選擇的，但如果你不用它，那么每次你使用一個組件在你代碼中時，你就必須使用完全限定的名稱，例如：「React.AppRegistry」而不能只用「AppRegistry」 、「React.StyleSheet」 而不能用「StyleSheet」 等等。
上面創建一個類只有一個渲染 () 函數。在渲染函數中無論什么被定義都是將輸出到屏幕上。上述使用 JSX（JavaScript語法擴展）來構建應用程序的 UI。如果您以前使用過 XML（甚至HTML），JSX 就會記住并熟悉你。它具有相同的均衡功能來打開和關閉標簽并使用屬性來設置值標簽。你不需要使用 JSX 本地反應，你可以使用純 JavaScript，但 JSX 建議它的簡單定義樹結構。如果你有很多 UI 的代碼，通過大型的 JSX 樹結構將更容易閱讀理解。
上面的樣式應用可于視圖的內容。如果你做過 web 開發或用過 CSS（層疊樣式表），在此之前這應該是熟悉的。React Native 使用 CSS 樣式應用程序的UI。如果你看看 JSX 代碼，你會看到不同風格的代碼被用在不同的地方。例如: style={style.container}設置樣式定義容器的外部視圖包含其他UI組件。
上面的樣式應用可于視圖的內容。如果你做過 web 開發或用過 CSS（層疊樣式表），在此之前這應該是熟悉的。React Native 使用 CSS 樣式應用程序的 UI。如果你看看 JSX 代碼，你會看到不同風格的代碼被用在不同的地方。例如: style={style.container}設置樣式定義容器的外部視圖包含其他 UI 組件。
上圖為2017年最新的視頻教程資料，搜索2352149755加我好友私聊我上傳視頻教程，有什么不懂的也可以來私聊問我。
不定時更新中。
如果你能明白這些視頻資料的好差，那么你也算是入行了，底層和中高層就是這一步之差。
