欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android原生嵌入React Native详解

程序员文章站 2024-03-05 21:52:19
1.首先集成的项目目录 我使用的是直接按照react-native init project 的格式来导入的,也就是说,我的androi...

1.首先集成的项目目录

我使用的是直接按照react-native init project 的格式来导入的,也就是说,我的android项目目录是跟node_modules是在一个目录下的。

我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过。

说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会android和ios的编译分开。

Android原生嵌入React Native详解

Android原生嵌入React Native详解

Android原生嵌入React Native详解

Android原生嵌入React Native详解

启动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,跟着步骤走就好了,给大家截个图:

Android原生嵌入React Native详解

最后你就可以在你的rn项目里面看到一个package.json。

Android原生嵌入React Native详解

运行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/

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