弹射起步：Android原生项目集成React Native模块

Posted on 2016-10-08 In react-native

说明和前提

1、由于通过命令react-native init初始化的React Native（以下简称RN）项目结构与原生项目有区别，所以不能单纯直接在已有项目的根目录下运行该命令。

2、RN需要Android4.1或以上的环境，故集成RN的Android项目的minSdkVersion需设置为API16或以上。

3、本机安装NPM支持：
新版的RN依赖都将发布在NPM（包管理工具，如同Maven仓库）中，故需安装NPM。

4、本文安装环境为MAC，Windows或Linux上的命令差异请参考官方文档。

集成步骤

1. 安装NPM

之后于同时需要NodeJS服务器，故只需安装NodeJS，NPM会随同安装。

1 2	brew install node brew install watchman

2. 添加NPM依赖

进入Android项目根目录，新建文件package.json，内容如下：

{
  "name": "react-native-module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.3.2",
    "react-native": "0.34.1"
  }
}

之后拉取NPM组件，在package.json同目录位置下运行

1	npm install

完成后将出现node_modules文件夹。

3.添加页面文件

在根目录下，新建文件index.android.js，内容如下：

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

class RN_Demo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

记住上面的组件名RN_Demo。

4.添加RN依赖

编辑app目录下的build.gradle，添加

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

之所以此处不根据官方文档的配置（compile ‘com.facebook.react:react-native:+’），你会发现通过Gradle Sync进行同步后会报错，所以需要在项目下的build.gradle中添加

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

否则未写明版本的RN依赖可能是jcenter中的旧版本。

5.新建Activity与Application

新建一个继承自ReactActivity的activity，内容如下：

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "RN_Demo";
    }
}

注意此处实现的getMainComponentName方法返回的字符串与index.android.js中注册的Component名的要一致。

之后编辑自定义Application，实现ReactApplication接口，内容如下：

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        // 表示是否启用开发者模式
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        // 模块列表，可添加原生Java模块
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

6.编辑`AndroidManifest.xml`

添加应用的网络访问权限，以及刚刚新建的Activity及Application：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.doslin.rndemo">

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

    <application
        android:name=".MainApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="false"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

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

</manifest>

7.添加NDK支持

在gradle.properties中添加如下内容：

1	android.useDeprecatedNdk=true

在app下的build.gradle中添加如下内容：

1
2
3

ndk {
    abiFilters 'armeabi', 'armeabi-v7a'
}

如果你的app需要在x86下运行，请额外进行配置x86。

8.启动Packager Server

在package.json同级目录下运行
react-native start
之后为了防止出现error “Could not get BatchedBridge, make sure your bundle is packaged properly” on start of app的异常，先运行