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