React Native分享記錄

今天我給你們分享React Native

先給你們看個好東西

這個ios app就是用react native寫的，沒有用到一句OC，也沒有用到webview

因此今天的主題是使用js寫原生應用

React Native的主旨是Learn once, write anywhere
React認爲各個平臺有其各自的特色和特長，若是使用一套代碼，一個界面可能不能發揮各自平臺的優點，因此咱們須要學習一次如何使用react，而後能夠在各個平臺去編寫各自的應用。

如今讓咱們來看看他是用了什麼架構

能夠看到咱們在寫代碼的時候寫的是react的js和jsx，而後經過Virtual DOM將代碼翻譯成各個平臺的代碼。

對前端來講最熟悉不過DOM了，而在React Native中咱們應該可以很是容易理解他的這個View的概念。

咱們最經常使用的div對應native裏的View，圖片image對應的仍是Image，常常用來包裹文字的span在native中是Text，常常用來寫列表的ul和ol在native中是ListView。

對前端來講還有個很是熟悉的點是css，native中有一套閹割版的css，叫css-layout

來看個對比

左邊是native的css-layout，右邊是普通的css，彷佛並非特別難理解，是吧？
不過layout裏沒有block inline-block這些了，佈局就統一採用了flexbox, layout支持絕大部分經常使用css。

來舉個例子

這是一個很是簡單的佈局，左右放置，而後右邊兩行字

用native大概只要這麼幾行代碼就實現了，是否是很是簡潔和易讀懂

來看看oc若是不拖界面，寫相似界面須要多少

可能會有困惑，前端在寫頁面的時候常常須要用到多個class並存的狀況，layout其實也能夠實現。

react幾乎沒用webview是怎麼作到的？ 他用一個叫JavascriptCore的橋把js通向oc，有點相似那些html5遊戲引擎使用的js binding的東西。

來講說如今的react native讓人蛋疼的地方
好比須要原生暴露接口，不過以前在寫react native的時候以爲須要原生暴露接口的地方，其實並不須要，後來在github上看到老外有些已經寫出來了，很是牛逼。
還有react的語法，雖然簡單，但可能對一些人來講不太能理解吧，不過我的感受，他比angular什麼的好理解多了，很是容易入門。

今天我就講這些啦，謝謝你們～

（另外，一開始舉得那個例子已經放在github上了 https://github.com/fakefish/sf-react-native 冷淡點贊中QAQ