React Native嵌入到現有原生應用(Android)

本文由 愛學園平臺 進行聯合編輯整理輸出

原作者：愛學園——莫比烏斯環

如果你正準備從頭開始制作一個新的應用，那么React Native會是個非常好的選擇。但如果你只想給現有的原生應用中添加一兩個視圖或是業務流程，React Native也同樣不在話下。只需簡單幾步，你就可以給原有應用加上新的基于React Native的特性、畫面和視圖等。

1.核心概念

這里把React Native組件植入到Android應用中有如下幾個主要步驟：

  1. 首先要了解你要植入的React Native組件。
  2. 在Android項目根目錄中使用npm來安裝react-native ，這樣同時會創建一個node_modules/的目錄。
  3. 創建js文件，編寫React Native組件的js代碼。
  4. 在build.gradle文件中添加com.facebook.react:react-native:+，以及一個指向node_nodules/目錄中的react-native預編譯庫的maven路徑。
  5. 創建一個React Native專屬的Activity(可混合使用)，在其中再創建ReactRootView。
  6. 生成對應bundle文件，啟動React Native的Packager服務，運行應用。
  7. 接下來可自由發揮，添加更多的React Native組件。
  8. 在真機上運行、調試（這里需要先更新bundle文件）。
  9. 打包。

2.開發環境準備

此處可參考我寫的另一篇文章React Native環境搭建，(已有環境的，此處可選擇跳過).

3.添加JS代碼管理

  • 在項目的根目錄運行以下命令：
$ npm init
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

此時可在Android項目根目錄下看到如下文件/文件夾：node_modules/、package.json

  • 打開package.json文件，在scripts屬性下添加如下字段：

"start": "node node_modules/react-native/local-cli/cli.js start"

  • 在根目錄下新建js文件夾(存放React Native相關組件)，index.android.js(RN啟動文件)。
    主要啟動代碼如下：
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import {AppRegistry} from 'react-native';
import AwesomeProject from './js/AwesomeProject'
//注冊（只要一遍）
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

4.添加App開發準備操作

  • 在你app的build.gradle文件內添加React Native相關依賴：

compile 'com.facebook.react:react-native:+' // From node_modules.

  • 在你工程build.gradle文件內添加本地React Nativemaven庫：
allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

<font color='red'>注意事項:這里的url路徑要寫對，否則將出現如下錯誤：
“Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.
</font>

  • AndroidManifest.xml清單文件配置
  • 如果你需要訪問React Native的DevSettingsActivity，則需要注冊
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

5.準備工作搞定：接下來添加原生代碼

  • 純React Native頁面主要代碼（底部有完整代碼地址）
package com.itingchunyu.reactnative.view;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.appcompat.BuildConfig;
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;

/**
 * Created by liyanxi on 2016/12/13.
 * Copyright (c) itingchunyu@163.com. All rights reserved.
 */

public class MyReactActivity extends AppCompatActivity 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())
                .setBundleAssetName("index.android.bundle") //可遠程地址
                .setJSMainModuleName("index.android")//根目錄下index.android.js文件
                .addPackage(new MainReactPackage())//如果為true，則會啟用諸如JS重新加載和調試之類的開發人員選項.反之打包
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
                //'AwesomeProject'==>index.android.js 頁面內注冊名稱，可根據自己隨意調整
        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", 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);
        }
    }

    @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();
    }
}
  • 原生和RN混合頁面主要代碼（底部有完整代碼地址）：
package com.itingchunyu.reactnative.view;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.appcompat.BuildConfig;
import android.widget.LinearLayout;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.shell.MainReactPackage;
import com.itingchunyu.reactnative.R;

/**
 * Created by liyanxi on 2016/12/13.
 * Copyright (c) itingchunyu@163.com. All rights reserved.
 */

public class HybridActivity extends AppCompatActivity {

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    private LinearLayout layoutReactContainer;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_second);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                //如果為true，則會啟用諸如JS重新加載和調試之類的開發人員選項.反之打包
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);

        layoutReactContainer= (LinearLayout) findViewById(R.id.layout_react);

        layoutReactContainer.addView(mReactRootView);
    }
}

6.配置權限保證開發過程中紅屏錯誤能正確展示

如果您的應用程式指定的Android API等級為23或更高，請確定您已為開發版本啟用了重疊權限。您可以使用“設置”進行檢查。 canDrawOverlays（this）;.這在開發版本中是必需的，因為反應本地開發錯誤必須顯示在所有其他窗口之上。由于在API級別23中引入了新的權限系統，用戶需要批準它。這可以通過將下面的代碼添加到onCreate（）方法中的Activity文件來實現。 OVERLAY_PERMISSION_REQ_CODE是類的一個字段，它負責將結果傳遞回Activity。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (!Settings.canDrawOverlays(this)) {
        Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                                   Uri.parse("package:" + getPackageName()));
        startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
    }
}

最后，必須覆蓋onActivityResult() 方法（如下面的代碼所示）來處理一致性UX的權限接受或拒絕的情況。

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                // SYSTEM_ALERT_WINDOW permission not granted...
            }
        }
    }
}

7.應用飛起來

  • 啟動服務器React packager

$npm start(配合package.json文件start)

或者

$react-native start

啟動服務
  • 啟動App應用(看效果)
app效果
  • 調試過程踩過的坑

啟動ReactNative相關Activity頁面崩潰

app崩潰

解決方案看代碼截圖：

崩潰解決

<font color='red'> 此處紅框內需要注意開發調試過程需要設置為true動態加載，false涉及到靜態bundle文件，下面打包會單獨講。</font>

8.在Android Studio中打包apk

你也可以使用Android Studio來打包！You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which’ll be included with your native Android app:

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

<font color='red'>上面主要意思是說在打包前不可避免的操作如下:</font>

1.在根目錄下執行上述命令，生成React Native Activity頁面bundle文件，此處注意路徑不要寫錯（這里是在./app/src/main/assets/目錄下生成對應index.android.bundle文件）

2.遠程bundle文件（用于動態更新，這里暫不詳解）

9.到此，相信你的應用應該跑起來了。期間如果遇到問題可給我留言，或發郵件（ixiyan.li@gmail.com）咨詢我，感謝你的瀏覽；

10.完整代碼地址

ReactNativeDemo

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,532評論 25贊 708
  • 用兩張圖告訴你，為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料？ 從這篇文章中你...
    hw1212閱讀 12,971評論 2贊 59
  • React Native嵌入Android原生項目中 開發環境準備 首先你要搭建好React Native for...
    呼呼哥閱讀 653評論 3贊 1
  • 昨晚，一個久未聯系的老同學微信問我：區塊鏈有路嗎？ 看到這句話，內心非常有傾談之感，但還是轉念一想，簡回：目前處在...
    鏈愛狂閱讀 210評論 0贊 0
  • 顧不得 細數銀杏樹 落下的哪一片葉 像好看的蝶 腳下的一團綠植物 就等著人去分辨 是昨夜已經枯萎 還是，今晨缺了水...
    立黃昏閱讀 636評論 26贊 50