Android集成React Native框架－上篇

我在上一篇入门文章里面已经讲到了如何全新构建一个React Native应用，以及其中涉及到的一些知识点。这篇文章主要聊聊如何在Android原生应用的基础上，集成React Native框架。

React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.

一、创建Android项目

因为React Native for Android只支持Gradle构建，所以在集成前，可以通过Android Studio创建项目，已有项目的可忽略，只强调两点：

• React Native for Android只支持Gradle构建
• Android版本最低支持到4.1（API 16）

二、添加JS到原生应用

进入到项目根目录，执行以下命令：

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

第一步执行npm init命令时，根据提示输入相关信息即可生成package.json文件，打开文件，在scripts节点下输入以下信息：

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

继续在根目录下创建index.android.js文件：

'use strict';

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

class HelloWorld 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('HelloWorld', () => HelloWorld);

三、原生应用添加React Native支持

在app的build.gradle文件里，添加React Native依赖：

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

在project的build.gradle文件里，添加本地React Native maven仓库的入口：

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

在开发模式下，需求去本地的服务器加载Javascript文件，所以需要在AndroidManifest.xml里面添加网络访问权限：

在调试模式下，需要加入DevSettingsActivity声明：

四、添加原生代码

为了在运行的时候能够打开React Native并且获取到它渲染的界面，我们需要添加一些原生的代码。我们可以创建一个Activity，在内部构造一个ReactRootView，用于开启React应用，并将其作为主要的内容界面。这部分代码可参考官网：

public class MyReactActivity extends Activity 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())
            .setUseOldBridge(true)
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

        setContentView(mReactRootView);
    }

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

这个地方需要强调的是，在使用Bridge的时候，需要指明使用OldBridge：

setUseOldBridge(true)

否则，会出现以下错误：

五、运行App

在运行App前，需要先开启本地的服务器，在根目录下执行以下命令：

$ nam start

到这一步，就可以正常的编译运行Android应用了。