写这篇博文的目的
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
直接崩了😭
没有飘出红窗口，是因为。。。。没有开Debug模式啊！！！
查看下MainApplication.java文件，查看BuildConfig.DEBUG是哪个包中的，一定要是该项目的包才行，比如我的是com.lyxia.rnjpushandroidpro。
BuildConfig很多包中都有，一定不要导错了啊！这个折腾了我好久😭😭😭
好了，让我们再运行一次~
终于飘红了啊（看到飘红都是开心的事O(∩_∩)O哈哈哈）
提示错误：
could not get BatchedBridge, make sure your bundle is packaged corrctly
嗯..好解决，摇一摇->Dev Setting->Debug server host & post for device，然后填入你的本机ip和nodejs端口，比如我的是:192.168.16.130:8081，然后再出来摇一摇~
然后..又飘红窗了😭 不过好解决嘛~因为还没有npm start啊~
一切准备就绪后，终于看到Hello World了！你好世界，你好，再见~
Paste_Image.png
第二步：集成jpush-react-native
1、在极光中新建App
新建时所需的应用包名可在这里查看：
Paste_Image.png
2、配置jpush-react-native
github地址：https://github.com/jpush/jpush-react-native
同样的，打开终端在项目根目录下输入：
npm install jcore-react-native --save
npm install jpush-react-native --save
下载完成后，按1、2、3的顺序修改如下文件：
Paste_Image.png
在1中修改如下：
include ':app', ':jpush-react-native', ':jcore-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, 'node_modules/jpush-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, 'node_modules/jcore-react-native/android')
注意路径'node_modules/...'
在2中修改如下：
android {
defaultConfig {
applicationId "yourApplicationId" //就是在极光注册的包名
...
manifestPlaceholders = [
JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey
APP_CHANNEL: "developer-default" //应用渠道号
]
}
}
...
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile project(':jpush-react-native')
compile project(':jcore-react-native')
compile "com.facebook.react:react-native:+" // From node_modules
}
在3中修改如下：
<!--添加通知权限，${ApplicationID}替换成你的applicationID!-->
<premission
android:name="${ApplicationID}.permission.JPUSH_MESSAGE"
android:protectionLevel="signature"/>
<application
...
>
...
<!-- Required . Enable it you can get statistics data with channel -->
<meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
<meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
</application>
然后sync，会看到包被导了进来：
Paste_Image.png
打开MainApplication.java，修改如下：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new JPushPackage(false,false)
);
}
打开index.android.js,添加如下修改：
import JPushModule from 'jpush-react-native';
// example
constructor(props) {
super(props)
JPushModule.initPush()
}
componentDidMount() {
JPushModule.addReceiveCustomMsgListener((map) => {
this.setState({
pushMsg: map.message
});
console.log("extras: " + map.extras);
});
JPushModule.addReceiveNotificationListener((map) => {
console.log("alertContent: " + map.alertContent);
console.log("extras: " + map.extras);
// var extra = JSON.parse(map.extras);
// console.log(extra.key + ": " + extra.value);
});
}
componentWillUnmount() {
JPushModule.removeReceiveCustomMsgListener();
JPushModule.removeReceiveNotificationListener();
}
打开node_modules/jpush_react-native/android/src/AndroidManifest.xml，将所有的${applicationId}替换成你的包名。
3、运行并发送通知
完结
如配置过程中遇到问题，请在评论中写出，欢迎交流_
官方demo地址：https://github.com/jpush/jpush-react-native/tree/master/example
参考文章：
jpush-react-native 插件的集成与使用 Android 篇
react native极光推送全程教程android和ios
网友评论