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/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-08-20 17:27:11

Android原生嵌入React Native详解的相关文章

Android原生嵌入React Native详解_Android

1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过. 说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开. 启动npm 下面说一下android

Android原生嵌入React Native

1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过. 说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开. 启动npm 下面说一下android

Android中图片压缩方案详解及源码下载

Android中图片压缩方案详解及源码下载 图片的展示可以说在我们任何一个应用中都避免不了,可是大量的图片就会出现很多的问题,比如加载大图片或者多图时的OOM问题,可以移步到Android高效加载大图及多图避免程序OOM.还有一个问题就是图片的上传下载问题,往往我们都喜欢图片既清楚又占的内存小,也就是尽可能少的耗费我们的流量,这就是我今天所要讲述的问题:图片的压缩方案的详解. 1.质量压缩法 设置bitmap options属性,降低图片的质量,像素不会减少 第一个参数为需要压缩的bitmap图

Android开发之Android.mk模板的实例详解

Android开发之Android.mk模板的实例详解 关于Android NDK开发的文章已经比较多了,我的博客中也分享了很多NDK开发相关经验和技巧,今天简单写了一个 Android.mk 的示例模板,供初学者参考. 本模板主要给大家示例 Android NDK 开发中的如下几个问题: 1. 如何自动添加需要编译的源文件列表   2. 如何添加第三方静态库.动态库的依赖   3. 如何构造一个完整的NDK工程框架 假设我们的项目依赖 libmath.a, libjson.a, libffmp

Android Parcelable接口使用方法详解

Android Parcelable接口使用方法详解 1. Parcelable接口 Interface for classes whose instances can be written to and restored from a Parcel. Classes implementing the Parcelable interface must also have a static field called CREATOR, which is an object implementing

Android中的Compass(罗盘) 详解

Compass(罗盘)是一个定制的视图, 继承View类, 重写了视图的边界(onMeasure)和内容(onDraw); 如图: 以下是Compass的具体设计: 1. 创建CompassView类, 罗盘视图 位置: java->package->CompassView package mzx.spike.compass.app; import android.content.Context; import android.content.res.Resources; import and

android 显示gif图片实例详解

  android 显示gif图片实例详解           在android中不支持gif格式的图片,但是由于我希望在我的程序中刚刚加载的时候有一个小人在跑步表示正在加载.而这个小人跑就是一个gif图片.也就是希望程序一启动时就加载gif图片.在网上查找了一些方法不知道是我使用的android的版本高(android4.4)还是什么问题就是加载不出来.最后想了一个办法加载了出来.这个办法就是将gif放在webView中让其显示. 下面是关于这个的代码: activity_prepare_fu

Android中Service(后台服务)详解

  这篇文章主要介绍了Android中Service(后台服务)详解,本文讲解了Service的概念.作用.生命周期.启动方式和代码实例等内容,需要的朋友可以参考下 1.概念: (1).Service可以说是一个在后台运行的Activity.它不是一个单独的进程,它只需要应用告诉它要在后台做什么就可以了. (2).它要是实现和用户的交互的话需要通过通知栏或者是通过发送广播,UI去接收显示. (3).它的应用十分广泛,尤其是在框架层,应用更多的是对系统服务的调用. 2.作用: (1).它用于处理一

sweet alert dialog 在android studio应用问题说明详解_Android

看到这个sweet-alert-dialog很亲切,因为前端开发本人用的提示就是这个js插件,java牛人很厉害,直接弄成一个java包插件,Good! 下面记录如何引用到工程,并使用: sweet-alert-dialog插件可以直接到github上下载 地址:https://github.com/pedant/sweet-alert-dialog 或者直接到发布好的页面下载: https://github.com/pedant/sweet-alert-dialog/releases 我下载的