混合开发的大趋势之一React Native与Android联调
转载请注明出处:王亟亟的大牛之路
先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android
公司某个app的rn模块已经上线了,虽然我没参与,但是从调研开始我都有大致了解,然后今天去学系列下,结合官方例子就写了这篇
基础配置部分
解说过程是从你Native加入rn模块,新建的rn项目配置的东西都有
首先 在你的项目根目录同级开一个rn目录(这里只是举个例子)
mkdir xxx-rn && cd xxx-rn
像这样
xxx-rn就是刚才新建的文件夹
lib和project就是你原有的项目
然后下所需的包以及生成package.json文件
可能需要FQ,或者跑tb的镜像
npm init
以及
npm install react react-native --save
再然后就把你的js代码丢到这里就行了,丢完之后启动服务
node node_modules/react-native/local-cli/cli.js start
就是起一个node.js的服务
然后在package.json文件里添加这段脚本
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
以后就直接 npm start就能跑 不用打一长串路径,类似于 win的环境变量
通常 rn的编译会跑 外网maven但是其实现在新版本rn发布都是走的npm,所以这些依赖都在你的”本地maven”环境里,所以需要修改主项目的build.gradle
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
一定要先mavenLocal()不然maven{}将没有效果,指向的地址其实也就是本地的”com.facebook.react.react-native”
这些都加完了ok,那再添加react-native 依赖
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}
至此 基本的配置就都ok了,开始搞安卓代码(这部分官网抄的)
安卓代码部分
//需要继承ReactActivity
public class MainActivity extends ReactActivity {
//根视图
private ReactRootView reactRootView;
//RN管理类
private ReactInstanceManager reactInstanceManager;
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "WjjPro";
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//初始化
reactRootView = new ReactRootView(this);
//初始化,这部分可以看api文档,具体字段内容还是比较多的
reactInstanceManager = ReactInstanceManager.builder()
//应用上下文
.setApplication(getApplication())
//js打包的名字
.setBundleAssetName("index.android.bundle")
//js首页
.setJSMainModuleName("index.android")
//基础的各种manager
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
//初始化执行的时间
.setInitialLifecycleState(LifecycleState.BEFORE_RESUME)
.build();
reactRootView.startReactApplication(reactInstanceManager, "WjjPro", null);
//渲染
setContentView(reactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
Log.d("--->","onPause");
if (reactInstanceManager != null) {
reactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
Log.d("--->","onResume");
if (reactInstanceManager != null) {
reactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
Log.d("--->","onDestroy");
if (reactInstanceManager != null) {
reactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
Log.d("--->","onBackPressed");
if (reactInstanceManager != null) {
reactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
// @Override
// public boolean onKeyUp(int keyCode, KeyEvent event) {
// if (keyCode == KeyEvent.KEYCODE_BACK && reactInstanceManager != null) {
// reactInstanceManager.showDevOptionsDialog();
// return true;
// }
// return super.onKeyUp(keyCode, event);
// }
}
reactInstanceManager做了一个统筹管理,把我们Native的各种行为与rn的js页面做关联,分发以及管理
通过log明显2者的关联已经有效
混合开发的大趋势之一React Native与Android联调的更多相关文章
- 混合开发的大趋势之一React Native之页面跳转
转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native之简单的登录界面
转载请注明出处:王亟亟的大牛之路 这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从"实战"中讲解吧 还是继续安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native手势行为那些事
转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...
- 混合开发的大趋势之一React Native之Image (脑动理解)
文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路 国庆这些天要么旅游要么WOW,感觉整个人都废了.. 直接从黄种人晒成了非洲大酋长..然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整 ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let
转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes
转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...
- 【React Native开发】React Native For Android环境配置以及第一个实例(1)
年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...
- 移动开发发展方向-----Hybird混合开发3大方案
移动开发发展方向-----Hybird混合开发3大方案
随机推荐
- Oracle分配内存的基本单位:Granule(粒度)
在9i后,SGA的内部组件大小可以动态调整,也可以由数据库自动管理,在设置内存大小的时候,分配的基本单位是粒度(granule) granule是一段连续的虚拟内存,大小区域决SGA_MAX_SIZE ...
- 适配器模式(Adpater)
一.适配器模式介绍 适配器模式:将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的类可以一起工作. 例如: NBA中的球员来自不同国家,而世界标准语言 ...
- linux日志自动分割shell
随着服务器运行时间不断增加,各种日志文件也会不断的增长,虽然硬盘已经是白菜价了,但是如果当你看到你的一个日志文件达到数十G的时候是什么感想?下面的脚本实现了如下功能: 自动对日志文件进行分割 对分割后 ...
- ubuntu安装mysql步骤
https://dev.mysql.com/downloads/file/?id=477124 ubuntu上安装mysql非常简单只需要几条命令就可以完成. 1. sudo apt-get inst ...
- Python的一些教程(转)
原文:http://blog.chinaunix.net/uid-26200547-id-3418038.html Python 安装配置及基本语法篇 Python 语言速成 Python 基本知识 ...
- 【opencv入门篇】快速在VS上配置opencv
环境配置:win7-32 + opencv2.4.6 + vs2013 注意:无论电脑是32位还是64位,配置opencv库目录时选择x84文件夹!因为编译都是使用32位编译:如果选用X64,则程序运 ...
- oracle查看被锁的表和被锁的进程,杀掉进程
-- 1. 查看被锁的表 SELECT p.spid, a.serial#, c.object_name, b.session_id, b.oracle_username,b.os_user_name ...
- 19.Eclipse 修改默认的keystore签名文件
Android开发中apk运行都需要签名,就算连接手机直接运行调试,apk都有签名,开发工具会有默认的debug_keyStore Eclipse ADT调试运行使用的是临时生成的Debug专用证书, ...
- DB_FILE_MULTIBLOCK_READ_COUNT对物理读和IO次数的影响
当执行SELECT语句时,如果在内存里找不到相应的数据,就会从磁盘读取进而缓存至LRU末端(冷端),这个过程就叫物理读.当相应数据已在内存,就会逻辑读. 物理读是磁盘读,逻辑读是内存读:内存读的速度远 ...
- sublime2常用设置
设置文本字体格式 • Preferences -> Setting-User • 加入设置:"font_face" : "courier new", &q ...