原生Android项目中集成react-native以及jpush-react-native（极光推送）

写这篇博文的目的

1、官方原生Android集成react native,根据官方文档配置后的总结与填坑（新版的配置手法上还是有些不同）。
2、官方jpush-react-native github文档写的配置过程在新版的react native中并不完整，使用最新的react native 0.41.2在配置极光时是需要做一些额外的操作（可以去看官方给的example）。
3、这篇文章中全程都是手动配置，是为了更好的理解整个配置流程。
4、我是边配边写的，最终配置成功，所以配置过程应该是一步都没漏。
5、把自己在配置过程中遇到的错误记录了下来（有些错误没记录下来的可以在评论给出），并给出解决方案。

集成环境：

Mac Sierra 10.12.1
Android Studio 2.2.3
Android Device（SDk：4.12.0）
Mac下Android的React Native开发环境配置
在极光推送注册App

需要用到的node_modules

react-native：^0.41.2
react: ^15.4.2
jpush-react-native: ^1.5.0
jcore-react-native: ^1.0.0

需要的知识

我只在Mac下Android的React Native开发环境配置接触过Android相关的开发知识，小白一个。
React Native的基本开发知识。

第一步：使用Android Studio新建一个原生Android项目并集成React Native

1、点击File->New->Project或者开始界面的New Project来新建一个项目：

Paste_Image.png

2、添加react native资源：
打开终端进入项目根目录运行：

npm init

该命令会在根目录下创建一个package.json文件，在创建过程中因为我的项目名有大写，所以在终端必须要填写小写的name：

Paste_Image.png

此时在项目根目录下就能看到package.json文件了：

Paste_Image.png

在package.json文件中的scripts下添加：

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

继续在终端输入以下命令：

npm install --save react react-native

加载完后会看到node-model包也在根目录下了：

Paste_Image.png

3、添加原生项目对react native的依赖：
按下图1，2，3的顺序依次修改配置：

Paste_Image.png

在1中，为 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"
        }
    }
    ...
}

此时它长这样：

Paste_Image.png

注意：url "$rootDir/node_modules/react-native/android"一定不能导错路径，当前我们的路径是$rootDir/node_modules而不是$rootDir/../node_modules。

在2中，添加 React Native 依赖:

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

此时它长这样：

Paste_Image.png

在3中，声明网络权限:

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

添加访问的DevSettingsActivity 界面：

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

此时，它长这样：

Paste_Image.png

现在，我们高高兴兴的sync吧！

如果遇到以下错误：

Error:Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version 16 declared in library [com.facebook.react:react-native:0.41.2] /Users/hfmoney/Documents/RN/Demo/RNJpushAndroidPro/app/build/intermediates/exploded-aar/com.facebook.react/react-native/0.41.2/AndroidManifest.xml
      Suggestion: use tools:overrideLibrary="com.facebook.react" to force usage

将2中的minSdkVersion改为16即可，改完后再次sync。
如果遇到以下错误：

Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. 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.

在2中添加：

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

改完后再次sync。

4：使用Android原生调用React Native
1、创建类MainApplication.java，继承Application，实现ReactApplication：

Paste_Image.png

实现如下：

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
              new MainReactPackage()      
            );
        }
    };

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

    @Override
    public void onCreate() {
        super.onCreate();

        SoLoader.init(this, false);
    }
}

请自行导包
2、修改MainActivity.java，继承自ReactActivity，实现如下：

public class MainActivity extends ReactActivity {

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

MainActivity返回了在RN中注册的组件名：HelloWorld。
3、在项目根目录下创建index.android.js，并写入：

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

4、修改app/src/main/AndroidMainfest.xml文件：
改变启动入口：

<application
  android:name="./MainApplication"
  ...
>
...
</application>

添加RN飘红的权限：

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

此时它长这样：

Paste_Image.png

5、骚年跑起来吧！
sync->运行
如若遇到以下错误：

java.lang.RuntimeException: com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly

直接崩了