android原生 rn结合,Android原生嵌入React Native详解

超、凢脫俗 2022-10-05 05:54 298阅读 0赞

1.首先集成的项目目录

我使用的是直接按照react-native init Project 的格式来导入的，也就是说，我的Android项目目录是跟node\_modules是在一个目录下的。

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

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

![e81c8aa97c6835676ff7905f90f405e7.png][]

![7db4f48bde68563b3205936b2e445ee1.png][]

![b334f5e86dac03497022debc2a472288.png][]

![ab7dda2a4f098a9321a9269c1693b6a6.png][]

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

![b7f6b90942a010036e511c553d491e9c.png][]

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

![ca000a0e382b8e262852188b5355cb22.png][]

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

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

[e81c8aa97c6835676ff7905f90f405e7.png]: /images/20221005/8723b9debd834799a405679ca51e4fab.png
[7db4f48bde68563b3205936b2e445ee1.png]: /images/20221005/d3c7fb474563408991b293c1975a6aab.png
[b334f5e86dac03497022debc2a472288.png]: /images/20221005/d78b9ecc82a04e4291451282347f7aa8.png
[ab7dda2a4f098a9321a9269c1693b6a6.png]: /images/20221005/a0efb610e00a4966a14fa288fb504c90.png
[b7f6b90942a010036e511c553d491e9c.png]: /images/20221005/14524494316c4397b4393d81d931bc02.png
[ca000a0e382b8e262852188b5355cb22.png]: /images/20221005/c9764497eb68466b9fe2e718893decee.png