React Native 十三：植入原生应用

由于React并没有假设你其余部分的技术栈—它通常只作为MVC模型中的V存在—它也很容易嵌入到一个并非由React Native开发的应用中。

一、需求

1.一个已有的、基于gradle构建的Android应用；

2.Node.js；

二、准备你的App

1.使用Android Studio创建一个项目，在你的App里的build.gradle文件中，添加React Native依赖：

compile 'com.facebook.react:react-native:0.20.+'

2.在你的AndroidManifest.xml里，增加Internet访问权限；

这个仅仅在调试模式从服务器加载JavaScript代码的时候用到，你可以在构建发行包的时候把这条去掉；

三、添加原生代码

MainActivity.java文件

package com.example.pengcx.reactnativetest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;

import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        //创建一个ReactRootView，把它设置成Activity的主视图
        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();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyAwesomeApp", null);

        setContentView(mReactRootView);
    }

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

    //传递一些Activity的生命周期事件到ReactInstanceManager，这是的JavaScript代码可以控制当前用户按下返回按钮的时候作何处理（譬如控制导航切换等等）。如果JavaScript端不处理相应的事件，你的invokeDefaultOnBackPressed方法会被调用。默认情况，这会直接结束你的Activity。
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }
     
    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this, this);
        }
    }

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

    //我们需要改动一下开发者菜单。默认情况下，任何开发者菜单都可以通过摇晃或者设备类触发，不过这对模拟器不是很有用。所以我们让它在按下Menu键的时候可以显示
    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

到此为止，你的Activity已经可以启动运行一些JavaScrip代码。

四、把JS代码添加到你的应用

在你的工程根目录，运行以下代码：

pengcx@pengcx-Ubuntu:~/AndroidStudioProjects/ReactNativeTest$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (ReactNativeTest) node_modules
Sorry, node_modules is a blacklisted name.
name: (ReactNativeTest) react_native
version: (1.0.0)
description: reactnative.cn
entry point: (index.js)
test command: make test
git repository:
keywords:
author:
license: (ISC)
About to write to /home/pengcx/AndroidStudioProjects/ReactNativeTest/package.json:

{
  "name": "react_native",
  "version": "1.0.0",
  "description": "reactnative.cn",
  "main": "index.js",
  "scripts": {
    "test": "make test"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) yes

pengcx@pengcx-Ubuntu:~/AndroidStudioProjects/ReactNativeTest$ npm install --save react-native
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
npm WARN peerDependencies The peer dependency react@^0.14.5 included from react-native will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.

> [email protected] install /home/pengcx/AndroidStudioProjects/ReactNativeTest/node_modules/react-native/node_modules/ws/node_modules/bufferutil
> node-gyp rebuild

make:进入目录'/home/pengcx/AndroidStudioProjects/ReactNativeTest/node_modules/react-native/node_modules/ws/node_modules/bufferutil/build'
  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/obj.target/bufferutil.node
  COPY Release/bufferutil.node
make:离开目录“/home/pengcx/AndroidStudioProjects/ReactNativeTest/node_modules/react-native/node_modules/ws/node_modules/bufferutil/build”
npm WARN optional dep failed, continuing [email protected]

> [email protected] install /home/pengcx/AndroidStudioProjects/ReactNativeTest/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate
> node-gyp rebuild

make:进入目录'/home/pengcx/AndroidStudioProjects/ReactNativeTest/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate/build'
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/obj.target/validation.node
  COPY Release/validation.node
make:离开目录“/home/pengcx/AndroidStudioProjects/ReactNativeTest/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate/build”

> [email protected] postinstall /home/pengcx/AndroidStudioProjects/ReactNativeTest/node_modules/react-native/node_modules/yeoman-generator/node_modules/cross-spawn/node_modules/spawn-sync
> node postinstall

[email protected] node_modules/react
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/react-native
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

pengcx@pengcx-Ubuntu:~/AndroidStudioProjects/ReactNativeTest$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2654  100  2654    0     0   1522      0  0:00:01  0:00:01 --:--:--  1521

上面的代码会创建一个node模块，然后react-native作为npm依赖添加。现在打开新创建的package.json文件然后在scripts字段添加如下内容：

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

复制并粘贴下面这段代码到你的工程根目录下面的index.android.js—这是一个简单的React Native应用：

android.android.js文件

'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
  Text,
  View,
  StyleSheet,
  AppRegistry
} = ReactNative;

class MyAwesomeApp extends React.Component {
  render() {
    return (
      
        Hello, World
      
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);

五、运行你的应用

为了运行你的应用，首先要启动开发服务器。只需要在你的工程目录运行这段代码：

pengcx@pengcx-Ubuntu:~/AndroidStudioProjects/ReactNativeTest$ npm start
 ┌────────────────────────────────────────────────────────────────────────────┐
 │  Running packager on port 8081.                                                                                                                       │
 │                                                                                                                                                                           │
 │  Keep this packager running while developing on any JS projects. Feel                                                                │
 │  free to close this tab and run your own packager instance if you                                                                      │
 │  prefer.                                                                                                                                                               │
 │                                                                                                                                                                           │
 │  https://github.com/facebook/react-native                                                                                                        │
 │                                                                                                                                                                           │
 └────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
   /home/pengcx/AndroidStudioProjects/ReactNativeTest

[02:17:41]  Building Dependency Graph
[02:17:57]  Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

六、应用程序运行如下：

现在来构建和运行你的Android应用（譬如./gradlew installDebug）。一旦启动了React Native制作的Activity，它应该会从开发服务器加载代码并显示：

提示1：在完成上面的操作步骤之后，启动程序获取JS代码的时候，程序会崩溃，报错如下：

05-12 02:52:21.440 3992-4020/com.example.pengcx.reactnativetest E/libEGL: cache file failed CRC check

05-12 02:52:21.502 3992-4019/com.example.pengcx.reactnativetest E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #1

Process: com.example.pengcx.reactnativetest, PID: 3992

java.lang.RuntimeException: An error occured while executing doInBackground()

at android.os.AsyncTask$3.done(AsyncTask.java:300)

at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:355)

at java.util.concurrent.FutureTask.setException(FutureTask.java:222)

at java.util.concurrent.FutureTask.run(FutureTask.java:242)

at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:231)

at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112)

at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587)

at java.lang.Thread.run(Thread.java:818)

Caused by: java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in /data/app/com.example.pengcx.reactnativetest-1/base.apk)

at com.facebook.react.modules.netinfo.NetInfoModule.(NetInfoModule.java:55)

at com.facebook.react.shell.MainReactPackage.createNativeModules(MainReactPackage.java:67)

at com.facebook.react.ReactInstanceManagerImpl.processPackage(ReactInstanceManagerImpl.java:793)

at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:730)

at com.facebook.react.ReactInstanceManagerImpl.access$600(ReactInstanceManagerImpl.java:91)

at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:184)

at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:169)

at android.os.AsyncTask$2.call(AsyncTask.java:288)

at java.util.concurrent.FutureTask.run(FutureTask.java:237)

处理：该问题应该是引用的react的版本问题，而且目前Maven库中没有最新版本的React Native版本，引用项目根目录下的最新版本：

修改app下的build.gradle文件

compile 'com.android.support:appcompat-v7:23.0.1'

compile 'com.facebook.react:react-native:+'

修改项目根目录下的build.gradle文件

allprojects {

    repositories {

        mavenLocal()

        jcenter()

        maven {

            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

            url "$projectDir/node_modules/react-native/android"

        }

    }

}