前言
作为移动开发爱好者,大部分时间我都在学习移动的原生 开发。对于最近(火了一年多,也不算最近)的兴起的混合开发稍作了解。
开发环境搭建
具体搭建过程详见[React Native 中文网]
搭建过程中遇到的坑:
1.关于安装react-native-cli过程的问题
如果遇上翻墙问题,可以设置淘宝代理下载,网速非常稳定。
2.真机测试白屏
需要在权限中设置 该app的悬浮窗权限。
3.无法链接测试
需要在局域网内,开启
react-native run-android
然后先在浏览器里输入 局域网:8081 是否显示 已开启服务
最后摇一摇手机进入设置界面,设置该局域网和端口号
4.重载代码
修改代码后,摇一摇手机即可进入选择。选择reload 即可加载修改的代码。
5.用AS运行该项目
将Android和js文件夹拷贝到新建的项目中,修改项目中app下的build.gradle的配置,统一为React-Native环境配置。将Application里的路径修改为自己的路径。
使用Android studio中Terminal运行:react-native run-android。
React Native 混合开发的思想
参考文章
RN最大的优势和吸引人的地方就是跨平台,也就是所谓的 learn once, run everywhere(这句话哪里听过了)。
整体架构如下:
04602301662556708a669ff6685f8978ce668b3d.jpg对于 Android 开发者来说, RN是一个普通的安卓程序加上一堆事件响应, 事件来源主要是JS的命令。主要有二个线程,UI main thread, JS thread。 UI thread创建一个APP的事件循环后,就挂在looper等待事件 , 事件驱动各自的对象执行命令。 JS thread 运行的脚本相当于底层数据采集器, 不断上传数据,转化成UI 事件, 通过bridge转发到UI thread, 从而改变真实的View。 后面再深一层发现, UI main thread 跟 JS thread更像是CS 模型,JS thread更像服务端, UI main thread是客户端, UI main thread 不断询问JS thread并且请求数据,如果数据有变,则更新UI界面。
ReactNavite的开发流程
-
编写index.android.js即可开发android应用。同理index.ios.js就是开发ios的。两者代码有所不同但大部分代码可以复用。
-
一个简单的hello world
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
// 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
启动app
摇一摇,reload 即可看见helloworld。
结束语
ReactNative 对于原生app开发者来说是一种全新的开发体验。无论是代码编写还是UI布局方式,这需要专门学习一种新的语言形式。
跨平台看起来是一个很好的东西,但其实是一个大坑。对于前端来说,RN好像确实能够做到无敌。但至于他们吹的杀死原生应用,还需要冷静的考虑一下。
我顺便搜索一下关于RN以及混合开发的职位,并不多。而且都是那种初创型的企业,为了节约成本。我居然看见一个招聘要求里需要一个人负责ios+网站+android+微信开发。
RN虽好,且行且珍惜。
接下来准备顺手撸一个RN的程序,作为和原生的比较体验。
网友评论