最新版Android原生整合RN

似水流年發表於2022-12-22
Android

前言

現在不少應用都是採用了混合開發模式，不論是原生加RN,或是原生加Flutter,或是原生加H5。原生實現主業務線，其他部分可以藉助跨平臺方案開發，提高開發效率，或者實現熱更新，調高業務迭代效率。

下面簡單介紹一下Android原生整合最新RN版本的過程。

新增package.json檔案

首先在一個正常編譯執行的原生APP根目錄下執行yarn init命令，按提示填寫基本資訊後會在專案根目錄下，建立一個package.json檔案。

新增JavaScript依賴,生成node_modules

然後，使用如下命令新增React和React Native執行環境的支援指令碼。

yarn add react react-native

命令執行完成後，所有JavaScript依賴模組都會被安裝到專案根目錄下的node_modules/目錄中。

注意：node_modules這個目錄我們原則上不復制、不移動、不修改、不上傳，隨用隨裝，同時把node_modules/目錄記錄到.gitignore檔案中（即不上傳到版本控制系統，只保留在本地）。

接下來，在package.json檔案中配置啟動RN Metro服務的指令碼，即script指令碼，檔案全部內容如下。
專案根目錄package.json檔案

{
  "name": "AndroidDemo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.70.6"
  },
  "scripts": {
    "start": "yarn react-native start"
  }
}

原生端新增React Native依賴

在app中build.gradle檔案中新增React Native和JSC引擎依賴:

dependencies {
    ...
    implementation "com.facebook.react:react-native:+"
    implementation "org.webkit:android-jsc:+"
}

在專案的build.gradle檔案中為React Native和JSC引擎新增maven源的路徑，必須寫在 "allprojects" 程式碼塊中。

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

！！！注意這裡有個問題，點選同步後，會報如下錯誤：

Build was configured to prefer settings repositories over project repositories but repository 'maven' was added by build file 'build.gradle'

原因是gradle7.0後，以前位於根專案build.gradle檔案中的程式碼庫設定現在遷移到了settings.gradle檔案中，根目錄build.gradle檔案不做更改。
settings.gradle檔案配置

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven {
            url "$rootDir/node_modules/react-native/android"
        }
        maven {
            url("$rootDir/node_modules/jsc-android/dist")
        }
    }
}
相關說明：https://developer.android.com...

配置原生專案網路許可權及開發者選單頁面

在原生AndroidManifest.xml檔案進行新增，對應示例如下
如果需要訪問http請求，需要application中新增usesCleartextTraffic

// 網路許可權
 <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:usesCleartextTraffic="true" // 訪問http請求
        android:theme="@style/Theme.AndroidStudy"
        tools:targetApi="31">

        <activity
            android:name=".MainActivity"
            android:exported="true">
<!--            <intent-filter>-->
<!--                <action android:name="android.intent.action.MAIN" />-->

<!--                <category android:name="android.intent.category.LAUNCHER" />-->
<!--            </intent-filter>-->
        </activity>

        <activity
            android:name=".MyActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"
            android:exported="true" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        //開發者除錯選單
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

建立一個RN入口檔案index.js

index.js是 React Native 應用在 Android 上的入口檔案。而且它是不可或缺的！它可以是個很簡單的檔案，簡單到可以只包含一行require/import匯入語句，示例程式碼如下。

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#f9c2ff',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'red'
  }
});

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

建立一個頁面用來承載RN頁面

需要在一個Activity中建立一個ReactRootView物件，然後在這個物件之中啟動React Native應用，並將它設為介面的主檢視，這裡建立了一個MyActivity頁面

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;

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;
import com.facebook.soloader.SoLoader;

public class MyActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SoLoader.init(this, false);
        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();
                // 注意這裡的MyReactNativeApp 必須對應"index.js"中的
        // "AppRegistry.registerComponent()"的第一個引數
        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 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 invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
// 後退按鈕事件傳遞給 React Native
    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }
}

自此原生端整合RN完成。

測試整合效果。

首先，需要啟動開發伺服器（Metro）。你只需在專案根目錄中執行以下命令：

yarn start

然後，點選Android Studio執行按鈕，正常執行專案即可。

載入完bundle檔案之後，可以看到如下頁面了。

相關文章