react native 極光推送
阿新 • • 發佈:2018-11-26
github: https://github.com/jpush/jpush-react-native
安裝:
yarn add jpush-react-native jcore-react-native
或者
npm install jpush-react-native --save
npm install jcore-react-native --save
自動配置:
react-native link 或者
react-native link jpush-react-native
react-native link jcore-react-native
輸入在極光官網所建立的應用名稱的 appKey
手動配置(Android):
1、settings.gradle
include ':jcore-react-native' project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android') include ':jpush-react-native' project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
2、build.gradle(app)
defaultConfig { applicationId "yourApplicationId" //此處改成你在極光官網上申請應用時填寫的包名 ... manifestPlaceholders = [ JPUSH_APPKEY: "yourAppKey", //在此替換你的 APPKey APP_CHANNEL : "default" //應用渠道號, 預設即可 ] ... } dependencies { ... compile project(':jpush-react-native') // 新增 jpush 依賴 compile project(':jcore-react-native') // 新增 jcore 依賴 ... }
3、AndroidManifest.xml
<application
...
<meta-data
android:name="JPUSH_APPKEY"
android:value="${JPUSH_APPKEY}" />
<meta-data
android:name="JPUSH_CHANNEL"
android:value="${APP_CHANNEL}" />
</application>
4、MainApplication.java 檔案,然後加入 JPushPackage,可參考 demo
// 設定為 true 將不彈出 toast
private boolean SHUTDOWN_TOAST = false;
// 設定為 true 將不列印 log
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)
);
}
};
5、MainActivity.java
@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);
}
@Override
protected void onDestroy() {
super.onDestroy();
}
ios:link 成功之後:
Libraries資料夾下多出
在 Build Phases 裡的 Link Binary With Libararies 下會多出以下依賴
在 AppDelegate.h 檔案中 匯入標頭檔案
static NSString *appKey = @"appkey"; //填寫appkey
static NSString *channel = @"nil"; //填寫channel 一般為nil
static BOOL isProduction = false; //填寫isProdurion 平時測試時為false ,生產時填寫true
在AppDelegate.m中的didFinishLaunchingWithOptions下新增
------ 新增的內容開始 ------
JPUSHRegisterEntity * entity = [[JPUSHRegisterEntity alloc] init];
entity.types = UNAuthorizationOptionAlert|UNAuthorizationOptionBadge|UNAuthorizationOptionSound;
[JPUSHService registerForRemoteNotificationConfig:entity delegate:self];
------ 新增的內容結束 ------
[JPUSHService setupWithOption:launchOptions appKey:@"8d8c4ffead4718717efb756d"
channel:nil apsForProduction:nil];
在Capabilities 下開啟 Push Notifications
證書的配置參考:https://docs.jiguang.cn/jpush/client/iOS/ios_cer_guide/
使用:
import JPushModule from 'jpush-react-native';
...
componentDidMount() {
// 新版本必需寫回調函式
// JPushModule.notifyJSDidLoad();
JPushModule.notifyJSDidLoad((resultCode) => {
if (resultCode === 0) {}
});
// 接收自定義訊息
JPushModule.addReceiveCustomMsgListener((message) => {
this.setState({pushMsg: message});
});
// 接收推送通知
JPushModule.addReceiveNotificationListener((message) => {
console.log("receive notification: " + message);
});
// 開啟通知
JPushModule.addReceiveOpenNotificationListener((map) => {
console.log("Opening notification!");
console.log("map.extra: " + map.extras);
// 可執行跳轉操作,也可跳轉原生頁面
// this.props.navigation.navigate("SecondActivity");
});
}
componentWillUnmount() {
JPushModule.removeReceiveCustomMsgListener();
JPushModule.removeReceiveNotificationListener();
}