React Native 学习总结

1. 写在前面

本次学习笔记是在研究RN（ReactNative缩写）的时候得出的一些感想和使用感受，以一个iOS初级开发人员的角度来记录下来的一些经验。如果有什么不对的，请指正。
在我看来，一个简单的app开发出发需要的是ui，值传递，网络，数据存储，ReactNative在这几个方面的很简单都涉及到了。

2. 简单介绍

今年3月份的时候FB发布出来的RN确实是让业界都火了一把，地球人真的是阻止不了前端人员的脚步了。
RN的原理（iOS这边）在我的理解看来其实是用了ios7出来的JavaScriptCore（这个可以深入学习一下）将ReactJS（FB开发出来的语言）转换成iOS原生的代码。也正是这样，RN与Native的接近度才可以这么低。而且相对于NativeScript等等其他的同类型的跨平台语言他的优势在于api会更全，包体积会更小（nativescript的framework 800+M，RN小多了。），而且有FB做后盾，迭代速度会更加快。
我们在学习ReactNative的时候首先要先了解ReactJS，JSX，FlexBox及obj-c(所以说以为只需要学一下RN就可以写移动app的话是很naive的，慢慢学吧。)
本次学习笔记不详细介绍code里面的东西，主要总结一些使用时的思想。

3. 布局FlexBox

http://segmentfault.com/a/1190000002658374 这篇文章结合着官方api来学习flexbox的话是可以灰常快的掌握RN的界面布局的。

ReactNative的FlexBox是一个阉割版的FlexBox，所以可以先看下api然后再对你的界面进行设计。

值得一吐槽的是，我们用RN搭出来的页面其实是通过一个一个View“贴”上去的，就像现实一样，越贴就会越厚，那么使用的内存就会越多。可能这是RN的特色吧？（who know?= =），同一个页面，RN写出来的和Native写出来的比较RN的内存会高很多，但跟Native流畅。这也算是一个弊端吧。

我们可以通过FlexBox来实现Autolayout的效果，但SizeClass的话还是算了吧。。。

4. 组件化的UI控件

在RN里面，你在屏幕上看到的所有的东西都是一个个的组件。我们在开发的时候也是要组件化来进行开发。
可以按照api和UIExport（看本文最后）里面的例子来模仿着写一下。
值得注意的是，如果能不用IOS后缀的组件就别用，，因为后面还要适配Android- -（虽然八字还没一撇）

5. 值传递

值得一坑的是，RN 在 ReactJS的官方文档里面写到，ReactJS提倡的是正向传值，所以反向传值是没有api的，作为一个iOS的开发者我觉得这个真的是一个坑- -。
不过还好的是，RN还是给我们提供两种值传递的方法- -（或者说是我目前找到的），一种是 Settings，一种是AsyncStorage，，，第一种是在RN的源代码里面找到的，相当于iOS中的UserDefault（- - 别问我这是什么），第二种是异步缓存- -官方api写得很清楚- -，需要注意的是它的链式编程，获取到的值需要在链式then（）里面才可以使用。

6. 网络请求

两种方法，fetch 和 XMLHttpRequest ，第一种使用比较方便，第二种功能比较全。详情看：https://facebook.github.io/react-native/docs/network.html#content

7.总结及一些坑

https://github.com/ele828/react-native-guide 这个网站里面有所有的学习资料

因为还在迭代中，所以还是很多的坑的例如官方文档跟他给我们的Demo不对应啊示例代码缺失啊神马的是需要一步一步踩过去的，同时还有很多东西还是没有研究出来的，例如navigator在初始化定义后颜色压栈后如果改变颜色啊，tabbar背景颜色的问题啊等等都是暂时无解的，有知道的小伙伴求告知啊。

报着玩的心态去学还是学得挺开心的。

https://rnplay.org/ 这个网站是可以让你在没有mac和iphone的情况下来体验一下如何用ReactNative来写一个移动app的，可惜只有一个js，所以还是老老实实在mac下开发吧。

Demo神马的就不上了。。。

官方Framework里面的Example中的UIExport项目里面的组件给的还是挺全的，可以看看。

暂时写这么多- - 欢迎各位前端大牛进来吐槽。。