极光推送官方支持的 React Native 插件
安装
npm install jpush-react-native --save
npm install jcore-react-native --save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native
一、自动配置部分（以下命令均在你的 REACT NATIVE PROJECT 目录下运行，自动配置后仍需手动配置一部分）
1.1执行脚本
npm run configureJPush <yourAppKey> <yourModuleName>
//module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响，不填写的话默认值为 app，会影响到查找 AndroidManifest 问题，
//如果没找到 AndroidManifest，则需要手动修改，参考下面的 AndroidManifest 配置相关说明)
//举个例子:
npm run configureJPush d4ee2375846bc30fa51334f5 app
1.2Link 项目
//执行自动配置脚本后再执行 link 操作
react-native link
二、手动操作部分 （3个步骤）
2.1
第一步：修改 app 下的 build.gradle 配置：
your react native project/android/app/build.gradle
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
android {
????
defaultConfig {
????????
applicationId?
"yourApplicationId"
????????
...
????????
manifestPlaceholders = [
????????????????
JPUSH_APPKEY:?
"yourAppKey"
,?
????????????????
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:+"??
}
|
将此处的 yourApplicationId 替换为你的项目的包名；yourAppKey 替换成你在官网上申请的应用的 AppKey。
2.2
检查是否导入以下配置项：
检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。
your react native project/android/app/build.gradle
|
1
2
3
4
5
6
7
|
...
dependencies {
????
compile fileTree(dir:?
"libs"
,include: [
"*.jar"
])
????
compile project(
‘:jpush-react-native‘
)??
????
compile project(
‘:jcore-react-native‘
)??
????
compile?
"com.facebook.react:react-native:+"??
}
|
检查 android 项目下的 settings.gradle 配置有没有包含以下内容：
settings.gradle
|
1
2
3
|
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‘
)
|
检查一下 app 下的 AndroidManifest 配置，有没有增加 <meta-data> 部分。
your react native project/android/app/AndroidManifest.xml
|
1
2
3
4
5
6
7
|
<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>
|
2.3：加入 JPushPackage (找到 app 下的 MainApplication.java)：
app/src.../MainApplication.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
private?
boolean SHUTDOWN_TOAST =?
false
;
??
private?
boolean SHUTDOWN_LOG =?
false
;
?
??
private?
final ReactNativeHost mReactNativeHost =?
new?
ReactNativeHost(
this
) {
?
??????
@Override
??????
protected?
boolean getUseDeveloperSupport() {
??????????
return?
BuildConfig.DEBUG;
??????
}
?
?
??????
@Override
??????
protected?
List<ReactPackage> getPackages() {
??????????
return?
Arrays.<ReactPackage>asList(
??????????????????
new?
MainReactPackage(),
??????????????????
??????????????????
new?
JPushPackage(SHUTDOWN_TOAST,SHUTDOWN_LOG)
??????????
);
|
上面 JPushPackage 的两个参数是 bool 类型的，第一个参数设置为 true 表示关闭 toast 提示，第二个设置为 true 表示关闭日志打印，建议在 debug 版本中打开。然后在 MainActivity 中加入一些初始化代码即可：
app/src.../MainActivity.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
public?
class?
MainActivity extends ReactActivity {???
????
...
????
@Override
????
protected?
void?
onCreate(Bundle savedInstanceState) {
????????
super.onCreate(savedInstanceState);
????????
JPushInterface.init(
this
);
????
}
?
????
@Override
????
protected?
void?
onPause() {
????????
super.onPause();
????????
JPushInterface.onPause(
this
);
????
}
?
????
@Override
????
protected?
void?
onResume() {
????????
super.onResume();
????????
JPushInterface.onResume(
this
);
????
}
}
|
收到推送
添加了此事件后，在收到推送时将会触发此事件。
需要注意的是，v1.6.6 版本以后，增加了?notifyJSDidLoad?方法，在监听所有相关事件之前要调用此方法，否则不会收到点击通知事件。
example/react-native-android/push_activity.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
...
import JPushModule?
from?
‘jpush-react-native‘
;
...
export?
default?
class?
PushActivity extends React.Component {
????
componentDidMount() {
????????
????????
JPushModule.notifyJSDidLoad((resultCode) => {
????????????
if?
(resultCode === 0) {
????????????
}
????????
});
????????
JPushModule.addReceiveNotificationListener((map) => {
????????????
console.log(
"alertContent: "?
+ map.alertContent);
????????????
console.log(
"extras: "?
+ map.extras);
????????????
????????????
????????
});
}
|
点击通知
在用户点击通知后，将会触发此事件。
|
1
2
3
4
5
6
7
|
...
componentDidMount() {
????
JPushModule.addReceiveOpenNotificationListener((map) => {
????????????
console.log(
"Opening notification!"
);
????????????
console.log(
"map.extra: "?
+ map.key);
????????
});
}
|
得到 REGISTRATIONID
用户注册成功后（一般在用户启动应用后），如果订阅了这个事件，将会收到这个 registrationId。
|
1
2
3
4
5
6
|
...
????
componentDidMount() {
????????
JPushModule.addGetRegistrationIdListener((registrationId) => {
????????????
console.log(
"Device register succeed,registrationId "?
+ registrationId);
????????
});
????
}
|
清除所有通知
建议在用户退出前台后调用。
|
1
2
3
4
5
|
...
?
componentWillUnmount() {
?????
console.log(
"Will clear all notifications"
);
?????
JPushModule.clearAllNotifications();
?
}
|
设置标签
example/react-native-android/set_activity.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
...
??
setTag() {
??????
if?
(
this
.state.tag !== undefined) {
??????????
??????????
??????????
?????
??????????
JPushModule.setTags([
"VIP"
,?
"NOTVIP"
],() => {
??????????????
console.log(
"Set tag succeed"
);
??????????
},() => {
??????????????
console.log(
"Set tag failed"
);
??????????
});
??????
}
??
}
|
设置别名
|
1
2
3
4
5
6
7
8
9
10
|
...
????
setAlias() {
????????
if?
(
this
.state.alias !== undefined) {
????????????
JPushModule.setAlias(
this
.state.alias,() => {
????????????????
console.log(
"Set alias succeed"
);
????????????
},() => {
????????????????
console.log(
"Set alias failed"
);
????????????
});
????????
}
????
}
|
