Android原生項(xiàng)目集成React Native的方法

更新時(shí)間：2017年11月01日 09:42:30 作者：隨便想個(gè)名字

本篇文章主要介紹了Android原生項(xiàng)目集成React Native的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

開發(fā)環(huán)境準(zhǔn)備

首先按照開發(fā)環(huán)境搭建教程來安裝React Native在安卓平臺(tái)上所需的一切依賴軟件（比如npm）。

在應(yīng)用中添加JS代碼

在項(xiàng)目的根目錄中運(yùn)行：

$ npm init
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

npm init創(chuàng)建了一個(gè)空的node模塊（其實(shí)就是創(chuàng)建了一個(gè)package.json描述文件），而npm install則創(chuàng)建了node_modules目錄并把react和react-native下載到了其中。至于第三步curl命令，其實(shí)質(zhì)是下載.flowconfig配置文件，這個(gè)文件用于約束js代碼的寫法。這一步非必需，可跳過。下面我們打開新創(chuàng)建的package.json文件，然后在其scripts字段中加入:

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

現(xiàn)在你的package.json內(nèi)容應(yīng)該類似這樣：

{
 "name": "react-example",
 "version": "1.0.0",
 "description": "this is my first react example",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node node_modules/react-native/local-cli/cli.js start"
 },
 "keywords": [
  "react",
  "android",
  "example"
 ],
 "author": "max",
 "license": "ISC",
 "dependencies": {
  "react": "^15.4.2",
  "react-native": "^0.42.3"
 }
}

接下來在項(xiàng)目根目錄中創(chuàng)建index.android.js文件，然后將下面的代碼復(fù)制粘貼進(jìn)來：

'use strict';

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',
 },
 hello: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
 },
});

AppRegistry.registerComponent('react-example', () => HelloWorld);

準(zhǔn)備工作

在你的app中 build.gradle 文件中添加 React Native 依賴:

dependencies {
   ...
   compile "com.facebook.react:react-native:+" // From node_modules.
 }

然后Sync的時(shí)候可能會(huì)有如下報(bào)錯(cuò)（坑一）：

復(fù)制代碼代碼如下:

Error:Conflict with dependency 'com.google.code.findbugs:jsr305' in project ':app'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.

Google一下解決方案，我們需要在app的build.gradle中添加如下代碼：

android {
  configurations.all {
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
  }
}

編譯完美通過！哈哈~

在項(xiàng)目的 build.gradle 文件中為 React Native 添加一個(gè) maven 依賴的入口，必須寫在 “allprojects” 代碼塊中:

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

正常情況下項(xiàng)目的build.gradle文件和node_modules目錄都是在根目錄下面，所以需要把

url "$rootDir/../node_modules/react-native/android"
改為
url "$rootDir/node_modules/react-native/android"

接著，在 AndroidManifest.xml 清單文件中聲明網(wǎng)絡(luò)權(quán)限:

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

如果需要訪問 DevSettingsActivity 界面，也需要在 AndroidManifest.xml 中聲明:

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

添加原生代碼

想要通過原生代碼調(diào)用 React Native ，就像這樣，我們需要在一個(gè) Activity 中創(chuàng)建一個(gè) ReactRootView 對(duì)象，將它關(guān)聯(lián)一個(gè) React application 并設(shè)為界面的主視圖。

如果你想在安卓5.0以下的系統(tǒng)上運(yùn)行，請(qǐng)用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。

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")
        .addPackage(new MainReactPackage())
        .setUseDeveloperSupport(BuildConfig.DEBUG)
        .setInitialLifecycleState(LifecycleState.RESUMED)
        .build();

    // 注意這里的react-example必須對(duì)應(yīng)“index.android.js”中的
    // “AppRegistry.registerComponent()”的第一個(gè)參數(shù)
    mReactRootView.startReactApplication(mReactInstanceManager, "react-example", 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();
    }
  }

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

注意這里的react-example必須對(duì)應(yīng)“index.android.js”中的“AppRegistry.registerComponent()”的第一個(gè)參數(shù)，以及package.json中的name屬性保持一致

我們需要把 MyReactActivity 的主題設(shè)定為 Theme.AppCompat.Light.NoActionBar ，因?yàn)槔锩嬗性S多組件都使用了這一主題。

<activity 
      android:name=".MyReactActivity"
      android:label="@string/app_name"
      android:theme="@style/Theme.AppCompat.Light.NoActionBar">
    </activity>

配置權(quán)限以便開發(fā)中的紅屏錯(cuò)誤能正確顯示

如果你的設(shè)備版本在23及以上，你需要確認(rèn)你的APP是否具有overlay permission

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中判斷是否獲得權(quán)限

@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...
      }
    }
  }
}

運(yùn)行你的應(yīng)用

運(yùn)行應(yīng)用首先需要啟動(dòng)開發(fā)服務(wù)器（Packager）。你只需在項(xiàng)目根目錄中執(zhí)行以下命令即可：

$ npm start

你可以把你的MyReactActivity作為launchActivity，直接啟動(dòng)，或者從別的Activity跳轉(zhuǎn)過去都可以，現(xiàn)在你只需要run app,下面貼出我的MainActivity的代碼

public class MainActivity extends AppCompatActivity {

  private static final int OVERLAY_PERMISSION_REQ_CODE = 0x1111;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    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);
      }
    }

    findViewById(R.id.text1).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this, MyReactActivity.class);
        startActivity(intent);
      }
    });
  }

  @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...
        }
      }
    }
  }
}

界面中只有一個(gè)TextView，點(diǎn)擊跳轉(zhuǎn)到MyReactActivity

真是個(gè)悲傷地故事，跳轉(zhuǎn)報(bào)錯(cuò)了。

這里寫圖片描述

繼續(xù)Google大法尋求幫助：

我們需要在module中新建一個(gè)assets目錄，android studio為我們提供了非常方便的方式，一鍵搞定！

這里寫圖片描述

然后我們?cè)诟夸浀拿钚袌?zhí)行如下命令：

復(fù)制代碼代碼如下:

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

這是為了把react native的代碼打包到android的assets目錄中，命令執(zhí)行完畢之后，我們會(huì)發(fā)現(xiàn)assets目錄中多了三個(gè)文件，

這里寫圖片描述

這個(gè)就是我們r(jià)eact native的代碼打包之后的樣子，然后我們r(jià)un app。

然后我們就會(huì)驚喜的發(fā)現(xiàn)APP成功運(yùn)行起來啦！

這里寫圖片描述

但是

到這里并沒有結(jié)束，我們?cè)囍鴵u晃一下手機(jī)，開啟傳說中的debug設(shè)置對(duì)話框，但是好像并沒有反應(yīng)，難道是搖晃的力度不夠？我們使出吃奶的力氣搖晃手機(jī)，還是沒卵用~而且有的同學(xué)可能已經(jīng)發(fā)現(xiàn)了，我們剛才用的是官方的打包命令，才完成了app的顯示。也就是說我們現(xiàn)在用的是app內(nèi)部的代碼，而不是我們本地node服務(wù)上的代碼。
這個(gè)就是官方教程的一個(gè)坑，我們回到初始化activity的地方，修改一點(diǎn)點(diǎn)代碼。

mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
    .setApplication(getApplication())
    .setBundleAssetName("index.android.bundle")
    .setJSMainModuleName("index.android")
    .addPackage(new MainReactPackage())
//        .setUseDeveloperSupport(BuildConfig.DEBUG) //開發(fā)者支持，BuildConfig.DEBUG的值默認(rèn)是false，無法使用開發(fā)者菜單
    .setUseDeveloperSupport(true)        //開發(fā)者支持,開發(fā)的時(shí)候要設(shè)置為true，不然無法使用開發(fā)者菜單
    .setInitialLifecycleState(LifecycleState.RESUMED)
    .build();

// 注意這里的react-example必須對(duì)應(yīng)“index.android.js”中的
// “AppRegistry.registerComponent()”的第一個(gè)參數(shù)
mReactRootView.startReactApplication(mReactInstanceManager, "peoplus", null);

setUseDeveloperSupport方法并沒有起作用，因?yàn)檫@個(gè)Config.DEBUG默認(rèn)值為false，所以這個(gè)地方我們手動(dòng)寫成true。我們這個(gè)時(shí)候重新run一遍程序，發(fā)現(xiàn)非常完美。到此結(jié)束。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: