使用JavaScript和React编写原生移动应用

使用JavaScript和React编写原生移动应用
React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。
React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

属于Facebook

这些产品在使用react-native (2016-07-11)

基础
一、核心组件

二、React基础

components 组件
JSX
props 属性
state 状态

三、样式

要求使用了驼峰命名法，例如将background-color改为backgroundColor

React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

弹性（Flex）布局

react Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它

<Image source={require(\'./my-icon.png\')} />
<Image source={{uri: \'https://facebook.github.io/react/logo-og.png\'}}   style={{width: 400, height: 400}} />
// 背景图
<ImageBackground source={...} style={{width: \'100%\', height: \'100%\'}}>
    <Text>Inside</Text>
  </ImageBackground>

静态的非图片资源：require语法也可以用来静态地加载你项目中的声音、视频或者文档文件，包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等

四、交互

处理触摸事件

onPressIn ：点击开始；
onPressOut ：点击结束或者离开；
onPress ：单击事件回调；
onLongPress ：长按事件回调。

<Button  
onPress={() => {
    Alert.alert(\'你点击了按钮！\');
  }}
  title="点我！"
/>

使用导航器跳转页面

主推的方案是一个单独的导航库react-navigation

动画

Animated

五、JavaScript环境

六、网络连接

使用 Fetch

使用其他的网络库

React Native 中已经内置了XMLHttpRequest API(也就是俗称的 ajax)。

第三方库——axios等。
不能使用jQuery，因为 jQuery 中还使用了很多浏览器中才有而 RN 中没有的东西

WebSocket 支持

调用原生
1、封装原生模块（ios）

先用Xcode创建原生模块，将其封装到一个或几个类文件中，并且编译自测通过，确保该模块在其他项目中集成能够正常使用

2、将原生组件暴露给React端，供其调用封装

2.1、在需要供RN调用的模块地方实现RCT_EXPORT_MODULE()宏，将模块暴露给React端，不同于原生组件，原生模块类不需要继承自RCTViewManager以及不需要实现- (UIView *)view方法

2.2、使用RCT_EXPORT_VIEW_PROPERTY()和RCT_EXPORT_METHOD()宏向React端暴露属性和方法(同原生组件)。
2.3、若需要回调，则仍需导入#import <React/RCTBridgeModule.h>，并且实现RCTBridgeModule协议，然后就可以使用```RCTResponseSenderBlock``来实现回调功能(这点也同原生组件调用)

3、React端使用原生组件

3.1、不同于原生组件，原生模块的调用可以直接在所需要的地方调用，而不需要React端进一步封装。在需要调用的地方导入import { NativeModules } from \'react-native\';

3.2、将原生组件导出赋值给常量， let OCRRecognizeManager = NativeModules.OCRRecognizeManager; 其中OCRRecognizeManager名字即为刚实现RCT_EXPORT_MODULE()宏的类名，常量名可随意取
3.3、在对应的地方使用该模块中的功能，如：

打包APK
一、生成一个签名密钥

用keytool命令生成一个私有密钥

keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

这条命令会要求你输入密钥库（keystore）和对应密钥的密码，然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件

二、设置 gradle 变量

把my-release-key.keystore文件放到你工程中的android/app文件夹下。
编辑~/.gradle/gradle.properties添加如下的代码（注意把其中的****替换为相应密码）

三、把签名配置加入到项目的 gradle 配置中

编辑你项目目录下的android/app/build.gradle，添加如下的签名配置：

四、生成发行 APK 包

只需在终端中运行以下命令：

五、测试应用的发行版本

在把发行版本提交到 Play Store 之前，你应该做一次最终测试。输入以下命令可以在设备上安装发行版本：

六、针对不同的 CPU 架构生成 APK 以减小 APK 文件的大小

七、启用Proguard来减少apk的大小（可选）

性能
一、JS 帧率(JavaScript 线程)

在一个复杂应用的根组件上调用了this.setState，从而导致一次开销很大的子组件树的重绘，可想而知，这可能会花费 200ms 也就是整整 12 帧的丢失。此时，任何由 JavaScript 控制的动画都会卡住。只要卡顿超过 100ms，用户就会明显的感觉到。

在 JavaScript 线程处理一个跨越多个帧的工作，你可能会注意到TouchableOpacity的响应被延迟了。这是因为 JavaScript 线程太忙了，不能够处理主线程发送过来的原始触摸事件，结果TouchableOpacity就不能及时响应这些事件并命令主线程的页面去调整透明度了。

二、开发模式

JavaScript 线程的性能在开发模式下是很糟糕的。这是不可避免的，因为有许多工作需要在运行的时候去做，譬如使你获得良好的警告和错误信息，又比如验证属性类型（propTypes）以及产生各种其他的警告。请务必注意在release 模式下去测试性能。

三、console.log 语句

在运行打好了离线包的应用时，控制台大量打印语句可能会拖累 JavaScript 线程。注意有些第三方调试库也可能包含控制台打印语句，比如redux-logger，所以在发布应用前请务必仔细检查，确保全部移除

四、ListView 首次渲染缓慢或者由于列表很大导致滑动很慢

五、在重绘一个几乎没有什么变化的页面时，JS 帧率严重降低

shouldComponentUpdate

六、在屏幕上移动视图（滚动，切换，旋转）时，UI 线程掉帧

设置shouldRasterizeIOS或者renderToHardwareTextureAndroid属性可以显著改善这一现象。不要过度使用该特性，否则你的内存使用量将会飞涨

七、用动画改变图片的尺寸时，UI 线程掉帧

八、Touchable 系列组件不能很好的响应

总结缺点
（1）与其他Android和iOS编程语言相比，React Native还不成熟。它仍处于改进阶段，这可能会对应用程序产生负面影响，尤其是每次发布新更新时，开发人员都必须进行大量更改并定期进行升级。应用程序在升级过程中也会遇到了很多问题。

（2）除了仅编写代码之外，开发人员有时还需要为与React Native不兼容的组件编写额外的本机代码，有时候与本机组件相比，React Native组件变得更差

（3）它缺乏安全稳健性，React Native是一个JavaScript库和开源框架，它在安全性方面存在重大问题

（4）React Native在最初渲染之前需要花费大量时间来初始化运行，因为JavaScript线程需要时间来初始化

优点
一、环境配置简单

装好npm，装好RN-cli，就可以愉快地开始初始化工程了。当然，如果是做Android项目需要另外装sdk等等，iOS则要装XCode。

二、实时远程调试

代码一改，app就自动更新成最新，对于UI的搭建简直是省了不少的编译时间。同时可以打开XCode实时的看到所有的log信息。

三、媲美原生应用

RN提供的组件是对原生API的暴露，这样就算是用js写出来的代码，实质上是调用了原生API来搭建的UI，在UI体验上足以媲美原生应用。虽说在逻辑计算上是用的js，但是要知道js的运行效率也是不慢的，基本上能够满足大部分的应用的需求了。

四、开发效率高

js学习成本低，使用组件式的架构开发，灵活的js语法，还有大量的第三方组件框架等等，在开发起交互比较复杂（非原生最基础的组件）的应用来，绝对是比原生开发起来要快得多的。

五、代码热部署

可以绕过AppStore超级久的审核流程了！这个优势是选择RN最根本的原因，因为是用的js来写的代码，实时编译的过程能让我们实现应用的热部署，真正能够审核一次，永久0审核更新。

六、跨平台应用

React Native创建的应用程序允许开发人员创建和构建跨平台应用程序，这些应用程序是客户端的完全本机应用程序，因为它使用基于iOS或Android组件构建的JavaScript组件。节省了跨平台应用程序开发时间，并且应用程序维护更便宜

end.