在Android原生应用上接入ReactNative实践

本文主要是介绍在Android原生应用上接入ReactNative实践，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在Android原生应用上接入ReactNative实践

一、安装nodejs, npm.

Linux

sudo apt install nodejs

Mac

brew install node

检查安装

node -v
npm -v

设置国内淘宝源

npm config set registry https://registry.npm.taobao.org

二、在project工程目录下添加文件package.json,然后执行npm install. 会在工程目录下生成node_modules目录。

{"name": "ReactNativeDemo","version": "0.0.1","private": true,"scripts": {"start": "yarn react-native start"},"dependencies": {"react": "16.9.0","react-native": "^0.61.5"}
}

三、在project工程目录下添加两个maven仓库

allprojects {repositories {google()jcenter()// RNmaven { url "$rootDir/node_modules/react-native/android" }// Android JSC is installed from npmmaven { url "$rootDir/node_modules/jsc-android/dist" }}
}

三、在已有的Android工程,添加如下代码：

1.在app工程下的build.gradle集成react-native库

implementation 'com.facebook.react:react-native:+'
implementation("org.webkit:android-jsc:+")

2.在AndroidMainfest.xml文件添加网络权限，调试要用

<uses-permission android:name="android.permission.INTERNET" />

3.在AndroidMainfest.xml文件添加React-native开发者调试界面,和Reactnative基类

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
<activity android:name="com.example.myapplication.ReactNativeBaseActivity"/>

4.在Application增加对ReactNative的so库的加载

SoLoader.init(this,false);

三.创建ReactNative的基类

代码如下：

package com.example.myapplication;import android.app.Activity;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.provider.Settings;import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;public class ReactNativeBaseActivity extends Activity implements DefaultHardwareBackBtnHandler {private ReactRootView mReactRootView;private ReactInstanceManager mReactInstanceManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mReactRootView = new ReactRootView(this);mReactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication()).setJSMainModulePath("index").addPackage(new MainReactPackage()).setUseDeveloperSupport(BuildConfig.DEBUG).setInitialLifecycleState(LifecycleState.BEFORE_CREATE).build();// The string here (e.g. "MyReactNativeApp") has to match// the string in AppRegistry.registerComponent() in index.jsmReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeDemo", null);setContentView(mReactRootView);}@Overridepublic void invokeDefaultOnBackPressed() {super.onBackPressed();}@Overrideprotected void onPause() {super.onPause();if (mReactInstanceManager != null) {mReactInstanceManager.onHostPause(this);}}@Overrideprotected void onResume() {super.onResume();if (mReactInstanceManager != null) {mReactInstanceManager.onHostResume(this, this);}}@Overrideprotected void onDestroy() {super.onDestroy();if (mReactInstanceManager != null) {mReactInstanceManager.onHostDestroy(this);}if (mReactRootView != null) {mReactRootView.removeAllViews();}}@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {mReactInstanceManager.onActivityResult(this, requestCode, resultCode, data);}
}

四、在原生工程指向这个Activity就会去加载ReactNative工程了

startActivity(Intent(this, ReactNativeBaseActivity::class.java))

五、创建ReactNative工程

1.创建ReactNativeDemo目录

2.创建文件package.json,并且运行npm install

{"name": "ReactNativeDemo","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ."},"dependencies": {"react": "16.9.0","react-native": "0.61.5"},"devDependencies": {"@babel/core": "^7.10.5","@babel/runtime": "^7.10.5","@react-native-community/eslint-config": "^2.0.0","babel-jest": "^26.1.0","eslint": "^7.5.0","jest": "^26.1.0","metro-react-native-babel-preset": "^0.61.0","react-test-renderer": "16.13.1"},"jest": {"preset": "react-native"}
}

3.创建index.js文件入口

import {AppRegistry} from 'react-native';
import App from './App';
AppRegistry.registerComponent('ReactNativeDemo',()=>App);

注意：这里的ReactNativeDemo的名称要和上面Android工程里面的名称一致

mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeDemo", null);

然后App.js就是React Native界面了，这个自由发挥。

demo代码仓库

这篇关于在Android原生应用上接入ReactNative实践的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---