Android原生项目集成React Native的方法

开发环境准备

首先按照来安装react native在安卓平台上所需的一切依赖软件（比如npm）。

在应用中添加js代码

在项目的根目录中运行：

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

npm init创建了一个空的node模块（其实就是创建了一个package.json描述文件），而npm install则创建了node_modules目录并把react和react-native下载到了其中。至于第三步curl命令，其实质是下载.flowconfig配置文件，这个文件用于约束js代码的写法。这一步非必需，可跳过。下面我们打开新创建的package.json文件，然后在其scripts字段中加入:

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

现在你的package.json内容应该类似这样：

{
 "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"
 }
}

接下来在项目根目录中创建index.android.js文件，然后将下面的代码复制粘贴进来：

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

准备工作

在你的app中 build.gradle 文件中添加 react native 依赖:

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

然后sync的时候可能会有如下报错（坑一）：

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 for details.

google一下解决方案，我们需要在app的build.gradle中添加如下代码：

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

编译完美通过！哈哈~

在项目的 build.gradle 文件中为 react native 添加一个 maven 依赖的入口，必须写在 “allprojects” 代码块中:

allprojects {
  repositories {
    ...
    maven {
      // all of react native (js, android binaries) is installed from npm
      url "$rootdir/../node_modules/react-native/android"
    }
  }
  ...
}

正常情况下项目的build.gradle文件和node_modules目录都是在根目录下面，所以需要把

url "$rootdir/../node_modules/react-native/android"
改为
url "$rootdir/node_modules/react-native/android"

接着，在 androidmanifest.xml 清单文件中声明网络权限:

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

如果需要访问 devsettingsactivity 界面，也需要在 androidmanifest.xml 中声明:

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

添加原生代码

想要通过原生代码调用 react native ，就像这样，我们需要在一个 activity 中创建一个 reactrootview 对象，将它关联一个 react application 并设为界面的主视图。

如果你想在安卓5.0以下的系统上运行，请用 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必须对应“index.android.js”中的
    // “appregistry.registercomponent()”的第一个参数
    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必须对应“index.android.js”中的“appregistry.registercomponent()”的第一个参数，以及package.json中的name属性保持一致

我们需要把 myreactactivity 的主题设定为 theme.appcompat.light.noactionbar ，因为里面有许多组件都使用了这一主题。

<activity 
      android:name=".myreactactivity"
      android:label="@string/app_name"
      android:theme="@style/theme.appcompat.light.noactionbar">
    </activity>

配置权限以便开发中的红屏错误能正确显示

如果你的设备版本在23及以上，你需要确认你的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中判断是否获得权限

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

运行你的应用

运行应用首先需要启动开发服务器（packager）。你只需在项目根目录中执行以下命令即可：

$ npm start

你可以把你的myreactactivity作为launchactivity，直接启动，或者从别的activity跳转过去都可以，现在你只需要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...
        }
      }
    }
  }
}

界面中只有一个textview，点击跳转到myreactactivity

真是个悲伤地故事，跳转报错了。

 

继续google大法寻求帮助：

我们需要在module中新建一个assets目录，android studio为我们提供了非常方便的方式，一键搞定！

 

然后我们在根目录的命令行执行如下命令：

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目录中，命令执行完毕之后，我们会发现assets目录中多了三个文件，

 

这个就是我们react native的代码打包之后的样子，然后我们run app。

然后我们就会惊喜的发现app成功运行起来啦！

但是

到这里并没有结束，我们试着摇晃一下手机，开启传说中的debug设置对话框，但是好像并没有反应，难道是摇晃的力度不够？我们使出吃奶的力气摇晃手机，还是没卵用~而且有的同学可能已经发现了，我们刚才用的是官方的打包命令，才完成了app的显示。也就是说我们现在用的是app内部的代码，而不是我们本地node服务上的代码。
这个就是官方教程的一个坑，我们回到初始化activity的地方，修改一点点代码。

mreactrootview = new reactrootview(this);
mreactinstancemanager = reactinstancemanager.builder()
    .setapplication(getapplication())
    .setbundleassetname("index.android.bundle")
    .setjsmainmodulename("index.android")
    .addpackage(new mainreactpackage())
//        .setusedevelopersupport(buildconfig.debug) //开发者支持，buildconfig.debug的值默认是false，无法使用开发者菜单
    .setusedevelopersupport(true)        //开发者支持,开发的时候要设置为true，不然无法使用开发者菜单
    .setinitiallifecyclestate(lifecyclestate.resumed)
    .build();

// 注意这里的react-example必须对应“index.android.js”中的
// “appregistry.registercomponent()”的第一个参数
mreactrootview.startreactapplication(mreactinstancemanager, "peoplus", null);

setusedevelopersupport方法并没有起作用，因为这个config.debug默认值为false，所以这个地方我们手动写成true。我们这个时候重新run一遍程序，发现非常完美。到此结束。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。