Android原生嵌入React Native
1.首先集成的项目目录
我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的。
我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过。
说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开。
启动npm
下面说一下android 嵌入RN环境吧。
编写Android原生代码,用来调用RN
package com.reactdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ReactDemo", null);
setContentView(mReactRootView);
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
}
注意要加上网络等一些权限。
创建package.json,添加react native包
使用命令npm init,跟着步骤走就好了,给大家截个图:
最后你就可以在你的RN项目里面看到一个package.json。
运行Demo
注:可能会出现java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly这个错误,
react-native bundle —platform android —dev false —entry-file index.android.js —bundle-output ReactDemo/app/src/main/assets/index.android.bundle —sourcemap-outpu ReactDemo/app/src/main/assets/index.android.map —assets-dest ReactDemo/app/src/main/res/
- 使用ASP.NET MVC2+PDF.NET 构建一个简单的新闻管理程序 示例过程
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】
- Android中Java和JavaScript交互
- Android UI控件系列:TabWidget(切换卡)
- 在Linux系统运行WinForm程序
- 将ZIP文件添加到程序集资源文件然后在运行时解压文件
- Android中App安装位置详解
- Java面试题系列之基础部分(二)——每天学5个问题
- Java面试题系列之基础部分(四)——每天学5个问题
- 使用ORM框架,必须迁就数据库的设计吗?
- 使用OQL+SQLMAP解决ORM多表复杂的查询问题
- PostgreSQL的.NET驱动程序Npgsql中参数对象的一个Bug
- 和Emoji相关的那些开源项目
- PostgreSQL的PDF.NET驱动程序构建过程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php一步一步实现mysql协议(四)——执行命令
- EdgeX foundry树莓派搭建与MQTT通讯
- .NET Core使用NPOI将Excel中的数据批量导入到MySQL
- RTSP协议网络摄像头网页无插件直播平台EasyNVR的云端综合管理平台EasyNVS提交基础配置报错原因分析
- 10.深入k8s:调度的优先级及抢占机制源码分析
- redis
- synchronized底层是怎么实现的?
- RSA
- Syncd - 开源自动化部署工具
- pointer-events:none禁用鼠标事件
- TiCDC 首个 GA 版本发布,特性与场景全揭秘
- Linux远程ssh执行命令expect使用及几种方法
- 数据结构--线性表和链表的基础知识
- Salesforce LWC学习(二十五) Jest Test
- 自建npm包-搭建,打包,调试,发布