react native开发Android 篇——极光推送
本次集成的各个依赖版本号:
"react-native": "0.59.9"
"jcore-react-native": "^1.3.3"
"jpush-react-native": "^2.5.3"
官网地址:https://www.jiguang.cn/
github地址:https://github.com/jpush/jpush-react-native
安装依赖
yarn add jpush-react-native/npm install jpush-react-native --save
yarn add jcore-react-native /npm install jcore-react-native --save
appkey获取
自动连接
react-native link jpush-react-native//这个需要输入极光推送创建的应用的appkey
react-native link jcore-react-native
连接完成之后检查以下文件中是否有相应的代码:
-
android/settings.gradle
include ':jpush-react-native' project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android') include ':jcore-react-native' project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')
-
android/app/build.gradle
defaultConfig { //极光推送 manifestPlaceholders = [ JPUSH_APPKEY: "你的appkey", APP_CHANNEL : "developer-default" ] dependencies { implementation project(':jcore-react-native') implementation project(':jpush-react-native') } }
-
android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.daysmatter"> <uses-permission android:name="android.permission.INTERNET" /> <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <!-- 极光推送 --> <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/> <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/> <!-- 极光推送 --> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application> </manifest>
-
android/app/src/main/java/com/daysmatter(自己的项目名称)/MainActivity.java
import java.lang.Override; import cn.jpush.android.api.JPushInterface;//极光推送 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 这里定义了在加载js的时候,同时弹起启动屏 // 第二个参数true,是启动页全屏显示,隐藏了状态栏。 SplashScreen.show(this, true); JPushInterface.init(this);//极光推送 } /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "DaysMatter"; } @Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.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(); } //极光推送
android/app/src/main/java/com/daysmatter(自己的项目名称)/MainApplication.java
import cn.jpush.reactnativejpush.JPushPackage;//极光推送 public class MainApplication extends Application implements ReactApplication { private boolean SHUTDOWN_TOAST = true;//极光推送关闭初始化成功的toast框 private boolean SHUTDOWN_LOG = false;//极光推送 private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( ...其他 new JPushPackage(SHUTDOWN_TOAST,SHUTDOWN_LOG)//极光推送 ); } @Override protected String getJSMainModuleName() { return "index"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); } }
使用
import JPushModule from 'jpush-react-native';//极光推送 componentDidMount() { //极光推送 JPushModule.initPush();// 初始化 JPush // 新版本必需写回调函数 // JPushModule.notifyJSDidLoad(); JPushModule.notifyJSDidLoad((resultCode) => { if (resultCode === 0) { console.log(resultCode); } }); // 接收自定义消息 JPushModule.addReceiveCustomMsgListener((message) => { console.log("接收自定义消息: " + message); //this.setState({ pushMsg: message }); }); // 接收推送通知 JPushModule.addReceiveNotificationListener((message) => { console.log("接收推送通知: " + message); }); // 打开通知 JPushModule.addReceiveOpenNotificationListener((map) => { console.log("Opening notification!"); console.log("map.extra: " + map.extras); // 可执行跳转操作,也可跳转原生页面 // this.props.navigation.navigate("SecondActivity"); }); // 推送事件 业务代码 JPushModule.sendLocalNotification({ buildId: 1, // 设置通知样式 id: 0, // 通知的 id, 可用于取消通知 extra: { key1: 1 }, // extra 字段 就是我们需要传递的参数 fireTime: new Date().getTime(), // 通知触发时间的时间戳(毫秒) title: '通知', content: '极光推送', }) } componentWillUnmount() { JPushModule.removeReceiveCustomMsgListener(); JPushModule.removeReceiveNotificationListener(); JPushModule.removeReceiveOpenNotificationListener(); }