ReactNative結合了Web應用和Native應用的優點,可使用javaScript來開發iOS和Android原生應用。在Javascript中用React抽象操做系統原生的UI組件,代替DOM元素來渲染等。ReactNative使你可以使用基於JavaScript和React一致的開發體驗在本地平臺上構建世界一流的應用程序體驗。前端
目前來講只有IOS的版本,而是用於Java的Android咱們還要在等待,那麼爲了方便咱們體驗首先咱們要有一個蘋果端的OSX系統和安裝xcode。java
根據須要咱們能夠選擇如下的編程語言工具,分別是homebrew,node.JS,watchman,和flow,那麼咱們首先來安裝homebrew,下面是安裝的的操做。咱們經過官網找到homebrew的軟件下載。node
homebrew:react
ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"ios
當咱們順利的安裝了homebrew後咱們接着安裝相應的應用工具node.JS,watchman,和flow。在homebrew的界面中輸入這樣的指令。git
BREW安裝節點(node)brewinstall守望(watchman)BREW的安裝流程(flow)程序員
四、當咱們把有可能用到的相關工具弄好以後,那麼咱們就要下載安裝react-native的源碼。npminstall-greact-native-cli/github
五、果真在建立源代碼的時候不是很瞭解我建議你去官網的教程哪裏的實例來建立,而我此次的操做也是官方的實例,經過命令指令創建一個demo工程。web
AwesomeProject這麼一個工程,輸入以下命令創建工程:npm
react-nativeinitAwesomeProject
反應awesomeproject本地初始化
六、而後咱們進入了react-native的界面在裏面打開一個xcode的awesomeproject-awesomeproject.xcodeproj運行cammad+r這樣咱們就能把一個APP的效果經過模擬器模擬出來了。
七、當上面的操做完成後你會看到有一個寫滿了窗口的代碼彈窗的出現,咱們確認後等待下一步操做。
八、咱們從代碼從看到index.JS.IOS,經過node.JS的終端咱們進行一個調試發現若是你修改了index.ios.js的代碼,而後在xcode裏執行cmd+r,xcode會從8081端口拉取最新的代碼執行,而且更新模擬器相應修改。
如下是index.IOS.JS的代碼結構圖。
蘋果代碼的入口都是經過Appdelegate.m形式進行入口打開,代碼以下:
jscodelocation=[NSURLurlwithstring:@「HTTP://本地:8081/指標。iOS。捆綁」];
從字面理解,咱們應該知道react-native是從本地端口拉取index.ios.js來執行一下了。爲了驗證是不是這樣,咱們改一下index.ios.js的名字爲test.ios.js,而後在Appdelegate.m裏把index.ios.bundle改爲test.ios.bundle,從新cmd+r,執行沒有問題,這就驗證了咱們的假設。
九、咱們再來看看index.JS的內容看看他的寫法是怎麼樣的,大概的瞭解咱們能夠去Facebook的官網上了解,由於這裏的介紹只是一個附加而用不上。一樣的這套代碼其實也應用於web和Android,目的是爲了減小native的APP開發難度,可以適合程序員的工做,只是Android的版本咱們還有待期待。
總結:ReactNative把重點放在全部開發人員關心的平臺的開發效率上——開發者只需學習一種語言就能輕易爲任何平臺高效地編寫代碼。Reactnative充分利用了Facebook的現有輪子,是一個很優秀的集成做品,而且我相信這個團隊對前端的瞭解很深入。這是一個科技進步的步伐咱們必定要慢慢去適應它。