在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()
        // RN
        maven { url "$rootDir/node_modules/react-native/android" }
        // Android JSC is installed from npm
        maven { 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;

    @Override
    protected 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.js
        mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeDemo", 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(this);
        }
        if (mReactRootView != null) {
            mReactRootView.removeAllViews();
        }
    }

    @Override
    protected 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代码仓库