Android集成ReactNative(0.61.5)

前言

为了把 React Native 集成到 Android 原生项目中,遇到不少问题参考了网上很多文章，但是都很旧了,而 React Native 已经升级到了 0.61.5 版本了,在Android中引入了facebook自己研发的JS引擎Hermas更多内容可以点这里,不过因为Apple的某某原因,目前还未使用该引擎,下面的内容也是基于这个版本实践的。
如果对react-native还不了解的同学,可以参考react native中文网

步骤一

先创建一个原生的Android项目(略过...),然后再该项目的根目录中执行

yarn init

根据提示一步步回车,然后会发现根目录中多出来一个package.json文件.
接着执行

yarn add react react-native

然后在package.json中添加如下代码

"scripts": {
    "start": "yarn react-native start",
  },

这样我们的react-native项目就初始化完毕了

步骤二

在根目录下创建一个index.js文件,作为我们rn页面的入口文件

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class HelloWorld extends React.Component {
    render() {
        return (
            
                    Hello, World
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);

步骤三

修改android项目中app目录下的build.gradle文件

• 创建jscFlavor和enableHermes变量

project.ext.react = [
        entryFile   : "index.js",//rn项目的入口文件名称
        enableHermes: true  // clean and rebuild if changing
]
def jscFlavor = 'org.webkit:android-jsc:+'
def enableHermes = project.ext.react.get("enableHermes", false);

• 修改dependencies,添加rn依赖

...
implementation "com.facebook.react:react-native:+" // From node_modules
implementation 'com.android.support:appcompat-v7:27.1.1'
...

• 最终结构如下

  
  
  build.gradle

步骤四

• 修改android项目的build.gradle文件,在allprojects中添加如下代码

   maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
        maven {
            url("$rootDir/node_modules/jsc-android/dist")
        }

• 赶紧build一下吧~~~~~~

步骤五

• 该步骤与中文网一致,可直接参考代码

package com.example.mixapp;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import androidx.annotation.Nullable;
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 MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);

    }


    @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.unmountReactApplication();
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

步骤六

• 修改android中的AndroidManifest.xml(添加网络权限,以及activity)

...

...



...

步骤七

• 修改MainActivity,在onCreate方法中加入

SoLoader.init(this, false);

• 将一个按钮设置点击事件,跳转到rn的页面

startActivity(new Intent(this, MyReactActivity.class));

最后一步

• 创建资源文件,在src的main文件中创建assets
• 执行如下命令

react-native bundle --platform android --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --dev false

yarn start

现在可以点击跳转试试啦