android开发rn插件,在Android原生应用中嵌入React Native
开发工具:Android Studio , WebStorm
参考链接:React Native官方中文文档
一.创建React Native项目
1.在本地React Native项目目录下,创建一个文件夹,取名为为ReactApp[名字随便取]
2.在ReactApp文件夹下,创建一个名为android文件夹【注:小写】,并将你现有的Android项目拷贝到/android子目录中。
3.在ReactApp文件夹下,创建一个名为package.json的空文本文件,并将以下内容拷入:
{
"name": "ReactApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.46.4"
}
}
注:代码中name为你当前RN项目的名称,语法请严格遵守Json语法规范
4.接下来我们使用npm(node包管理器,Node package manager)在项目根目录安装React和React Native模块,打开终端运行:npm install ,RN所需要的模块会被安装到项目根目录下的node_modules/目录中。
二.打开Android Studio 将/android子目录作为Android项目导入到AS中,导入项目无报错,开始以下步骤:
配置maven:
注:如果项目minSdkVersion小于16,请修改为16,RN不支持16版本以下的设备 1.在你的app中 build.gradle 文件中添加 React Native 依赖: dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
} 2.在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 "allprojects" 代码块中: allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
注:同步Gradle如果报这个错误:
Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.1) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
在你的app中 build.gradle 文件中添加: android{
...
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
}
配置权限 1.在 AndroidManifest.xml 清单文件中声明网络权限: 2.如果需要访问 DevSettingsActivity 界面(即开发者菜单),则还需要在 AndroidManifest.xml 中声明:
三.用WebStorm打开创建ReactApp项目:
在项目根目录创建名为index.android.js文件,代码如下:
import React, {Component} from 'react';
import {AppRegistry, View, Text, StyleSheet} from 'react-native';
//import MyLog from './js/MyLog';
//import MyToast from './js/MyToast';
class ReactApp extends Component {
constructor(props) {
super(props);
//MyLog.debug("yxjie", "constructor");
//MyLog.info('yxjie', 'constructor');
}
render() {
//MyLog.debug("yxjie", "render");
return (
欢迎来到RN界面
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1,
backgroundColor: 'skyblue',
},
center: {
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 22,
fontWeight: 'bold',
color: 'black',
}
});
AppRegistry.registerComponent('ReactApp', () => ReactApp);
四.配置权限以便开发中开启RN红屏错误能正确显示【Android 入口Activity中配置】
1. 入口Activity的onCreate方法中添加如下代码:
//检测是否开启悬浮窗权限【RN】
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
2. 加入onActivityResult方法回调:
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
五.核心内容:【创建展示React Native代码显示界面,并在AndroidManifest.xml申明】
请原谅我的懒惰直接贴代码:
public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
// .addPackage(new AnExampleReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的MyReactNativeApp必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "ReactApp", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
}
注:以上代码RN官方文档都有解释,再次不废话【有不明白的请移步RN官方文档,或给我留言,谢谢!!!】
五.运行代码【若是真机调试,请用adb命令行修改设备端口为8081】
1.直接用Android Studio run一下你的代码;
2.运行Packager,再React Native项目根目录,打开终端直接运行:npm start 开启RN服务;
DuangDuangDuang~~ 看到运行结果 是不是很激动,哈哈 !
下篇文章,会写RN注册并调用Android原生模块的控件方法
React Native调用Android原生方法
以上内容,如有错误,欢迎留言指正! 谢谢~~~
android开发rn插件,在Android原生应用中嵌入React Native相关推荐
- Android开发介绍(基于Android Studio软件)
Android开发介绍(基于Android Studio软件) 关于Android开发,笔者走过一些弯路,因此今天总计了有关Android开发的一些内容和心得,希望对大家有所帮助.首先来一张安卓开发者 ...
- android studio开发工具介绍,Android应用开发之Android开发工具介绍、Android Studio配置...
本文将带你了解Android应用开发之Android开发工具介绍.Android Studio配置,希望本文对大家学Android有所帮助. 2.1 Android Studio配置 2.1.1 ...
- 4、在已有的Android应用中使用React Native
这一篇记录的是如何在已有的Android应用中使用React Native,在官方的文档上也有介绍:http://reactnative.cn/docs/embedded-app-android.ht ...
- Android开发三 如何安装 Android SDK 和Eclipse 插件
所需开发环境: JDK 5 或 JDK 6 (仅有JRE不够) .Eclipse 3.5 (galileo) 下载用于在Eclipse 开发android应用的ADT 插件 在企业开发中,很多程序员使 ...
- Android开发桌面插件
前提:公司应用需要开发插件,奈何我实在没有块的开发经验,查阅了一些资料,花了几天时间,完成了插件的开发. 开发桌面插件需要了解AppWidgetProvider,RemoteViewsService, ...
- Android开发技巧!高级Android晋升之View渲染机制,Android篇
前言 众所周知,Xamarin应该是.net下的跨平台开发工具.2016年之前还处于收费状态,后被微软收购后开源.但似乎有个现象,开源后的Xamarin发展似乎有些停滞,而且维护Xamarin的团队又 ...
- Android开发自学笔记(基于Android Studio1.3.1)—1.环境搭建(转)
一.引言 本套学习笔记的开发环境是Windows 10 专业版和Android Studio 的最新版1.3.1. Android Studio 是一个Android开发环境,基于Intelli ...
- android开发学术报告,基于Android应用的安全防护技术研究
摘要: Android平台由于其开源性,免费性,硬件多等优点,一经推出就获得了厂商和消费者的喜爱,迅速成为市场份额最多的移动端平台.面向Android平台开发设计的应用程序也如雨后春笋般增长.与此同时 ...
- Android开发学习笔记---搭建Android开发环境
今天突发奇想,想看看Android开发是什么样的,于是就在度娘了一下Android开发,便自己动手搭建了起来.中间也碰到了一些问题,自己慢慢度娘,谷哥去解决.现在把搭建步骤记录如下: 第一步:下载Ec ...
最新文章
- 使用Spring操作Redis的key-value数据
- 运行时权限+读取系统联系人
- arrays中copyof_在内存只有10M的空间中申请一块5M的数组空间,会导致OOM吗?
- 实验一 线性表、堆栈和队列的操作与实现
- c++ 跳转到上级目录_Windows漏洞利用开发 第4部分:使用跳转定位Shellcode 模块
- 如何让百度第一时间收录你的网站
- 怎样把照片中的头像扶正_这些圣诞壁纸也太好看了吧,还能自制圣诞帽头像,换它...
- 输入输出Fibonacci数
- 【学习记录】Sql中存储过程的
- 【Decision Tree】林轩田机器学习技法
- 冲突域和广播域的隔离与扩展
- 虚幻c++入门到入土(一)VS插件Resharper使用
- 以后不该吃的不能吃了。。。
- 【深度首发】禾多科技倪凯:作为自动驾驶领域的“拓荒者”,能否成为推动自动驾驶汽车商业落地的第一人?丨Xtecher 封面
- SKETCH 切出背景透明的图标
- linux文件空洞与稀疏文件,Linux文件空洞与稀疏文件
- word文档乱码了怎么办
- python推箱子游戏顶层设计子层设计_python实现推箱子游戏
- 复习单片机:动态数码管(1 数码管介绍+2 74HC245 和 74HC138 芯片介绍+3 硬件设计+4 软件设计+5 实验现象)
- 头像上传(限制大小,格式,尺寸)