前端学习总结（十七）React Native——移动开发的未来趋势

简介：

特点：

异步执行

在Javascript代码和原生平台之间的所有操作都是异步执行的，并且原生模块还可以根据需要创建新的线程。这意味着你可以在主线程解码图片，然后在后台将它保存到磁盘，或者在不阻塞UI的情况下计算文字大小和界面布局等等。

所以React Native**开发的app天然具备流畅和反应灵敏的优势。Javascript和原生代码之间的通讯是完全可序列化的，这使得我们可以借助Chrome开发者工具去调试**应用，而不论应用运行在模拟器还是真机上。

弹性盒(Flexbox)和样式

控制view的布局应当简单易行，这就是为什么React Native从web中借鉴了Flexbox模型。Flexbox让大多数常见的UI布局构建变得简单，同时，React Native还支持多种常见的web样式。

兼容通用标准

React Native吸纳了web生态系统中的通用标准，并在必要的时候为这些API提供兼容层，比如：npm上的许多库就可以在React Native中直接使用。

扩展性以及与原生技术的相互结合

使用React Native，无需编写一行原生代码即可创造一款不错的app。尽管如此，使用自定义的原生视图和模块来扩展React Native也非常容易 —— 这意味着你现有的所有工作都可以被复用，你喜欢的各种原生库都可以被导入。

要想在原生ios创建一个react native的ios模块，只需要创建一个接口，实现RCTBridgeModule协议，然后把你想在Javascript中使用的任何方法用RCT_EXPORT_METHOD包装。最后，再用RCT_EXPORT_MODULE导出整个模块。

要想在原生ios创建一个react native的ios view，可以先继承RCTViewManager类，然后实现一个-(UIView *)view方法，并使用RCT_EXPORT_VIEW_PROPERTY宏导出属性。最后用一个Javascript文件连接并进行包装。

同样，Android也支持自定义扩展。只是方法略有不同。

要想在原生Android中创建一个react native的Android模块，需要先创建一个继承自ReactContentBaseJavaModule的类，然后用@ReactMethod标注(Annotation)来标记那些你希望通过Javascript来访问的方法。最后，要在ReactPackage中注册这个模块。

要想在原生Android中创建一个自定义的React Native的Android View，首先要定义一个继承自SimpleViewManager的类，并实现createViewInstance和getName方法，然后使用@ReactProp标注导出属性，最后用一个Javascript文件连接并进行包装。

React Native的优势：

跨平台，兼容Web、IOS、Android三大主流平台
React调用原生控件，性能优于H5框架
更好的手势识别
实时部署更新，再也不用担心应用市场审查缓慢
既拥有Native的用户体验，有能保留React的开发效率！

React Native基础注意点

React Native从0.18之后，新建项目默认采用ES6语法，个人也比较推荐用ES6，毕竟是js的新标准，如果不熟悉ES6与ES5的区别可以参考下这篇文章：

http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8

想进一步深入学习ES6可以看下阮一峰前辈的书《ECMAScript 6入门》：http://es6.ruanyifeng.com/

1.样式

可以接受数组形式的多个style。

<View style={[styles.base, styles.background]} />

为了避免多个值的冲突，最右边的元素优先级最高

2.宽度

设置高度或者宽度时不用带单位，默认使用 pt 为单位
不能使用百分比来设置宽度或高度
可通过 Dimensions 模块来获取窗口宽高
可通过 PixelRatio 模块来获取像素密度

3.定位

支持 absolute 和 relative 定位
和css的标准不同， 元素父容器不用设置position：’absolute|relative’

4.图片

静态图片资源

可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。Packager会打包所有的图片并且依据屏幕精度提供对应的资源。比如，iPhone 5s会使用[e-mail]，而Nexus 5上则会使用[e-mail]。如果没有图片恰好满足屏幕分辨率，则自动选中最接近的一个图片。

网络图片

与静态资源不同，加载网络图片需要手动指定图片的尺寸。 如果不给图片指定尺寸，浏览器会首先渲染一个0x0大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是UI会在图片加载的过程中上下跳动，使得用户体验非常糟糕。

5.手势响应

用户之所以会觉得web app和原生app在体验上有巨大的差异，触摸响应是一大关键因素。用户的每一个操作都应该具有反馈/高亮和通过把手指移开来取消，这些特性可以使用户在使用App时体验更好。

Touchable：用来做“可触控”的组件，可以简单地以声明的方式来配置触控处理。

TouchableHighlight：可用来做按钮或者网页链接的组件

通过两个方法去“询问”一个View是否愿意成为响应者：

View.props.onStartShouldSetResponder: (evt) => true :在用户开始触摸的时候（手指刚刚接触屏幕的瞬间），是否愿意成为响应者？

View.props.onMoveShouldSetResponder: (evt) => true:如果View不是响应者，那么在每一个触摸点开始移动（没有停下也没有离开屏幕）时再询问一次：是否愿意响应触摸交互？

动画

流畅、有意义的动画对于移动应用用户体验来说非常必要。常用的库有用于全局布局动画的LayoutAnimation和用于创建更精细的交互控制的动画Animated。

如果发现动画丢帧（低于60帧每秒），可以尝试使用setNativeProps或者shouldComponentUpdate来优化。

PS:
setNativeProps方法用于直接修改基于原生视图的组件的属性，而不需要使用setState来重新渲染整个组件树。

常用组件实例整理

1.Listview
http://reactnative.cn/docs/0.26/tutorial.html#content

2.Scrollview
http://reactnative.cn/docs/0.26/scrollview.html#content

3.TabBarIOS
http://reactnative.cn/docs/0.26/tabbarios.html#content

4.WebView
http://reactnative.cn/docs/0.26/webview.html#content

5.ActionSheetIOS(IOS上的分享到其他应用可以用这个)
http://reactnative.cn/docs/0.26/actionsheetios.html#content

6.Alert(各种弹出提示框)
http://reactnative.cn/docs/0.26/alert.html#content
以及AlertIOS:
http://reactnative.cn/docs/0.26/alertios.html#content

7.Animated(动画)
http://reactnative.cn/docs/0.26/animated.html#content

开发常见错误解决方法

1.java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

解决：http://www.w2bc.com/article/126582

React Native学习资源

1.React Native中文文档：
http://reactnative.cn/docs/0.26/getting-started.html

2.整理了一份React-Native学习指南：
http://www.w3ctech.com/topic/909?utm_source=tuicool&utm_medium=referral

3.知乎：如何评价 React Native？
https://www.zhihu.com/question/27852694

4.react-native试玩系列博客教程：
http://blog.csdn.net/column/details/doctorqrn.html