使用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.