react native jpush

原文链接:https://blog.csdn.net/qq_38719039/article/details/80684144

1 npm install jpush-react-native --save

2 npm install jcore-react-native --save

 

自动关联配置部分 

 

$ react-native link

 

2. 手动配置部分

在 Android Studio 中打开你的项目，然后找到 app 或者你自己定义的需要集成 jpush-react-native 的模块，打开此模块下的 build.gradle 文件，做以下改动：

project/android/app/build.gradle

1.  
   android {
2.  
   ...
3.  
   defaultConfig {
4.  
   applicationId "yourApplicationId" // 此处改成你在极光官网上申请应用时填写的包名
5.  
   ...
6.  
   manifestPlaceholders = [
7.  
   JPUSH_APPKEY: "yourAppKey", //在此替换你极光官网上申请的 APPKey
8.  
   APP_CHANNEL: "developer-default" //应用渠道号, 默认即可
9.  
   ]
10.  
    }
11.  
    }
12.  
    ...
13.  
    dependencies {
14.  
    compile fileTree(dir: "libs", include: ["*.jar"])
15.  
    compile project(':jpush-react-native') // 添加 jpush 依赖
16.  
    compile project(':jcore-react-native') // 添加 jcore 依赖
17.  
    compile "com.facebook.react:react-native:+" // From node_modules
18.  
    }

检查 android 项目下的 settings.gradle 配置有没有包含以下内容：

project/android/settings.gradle

1.  
   include ':app', ':jpush-react-native', ':jcore-react-native'
2.  
   project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
3.  
   project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

检查一下 app 下的 AndroidManifest 配置，有没有增加 <meta-data> 部分。

project/android/app/AndroidManifest.xml

1.  
   <application
2.  
   ...
3.  
   <!-- Required . Enable it you can get statistics data with channel -->
4.  
   <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
5.  
   <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
6.  
    
7.  
   </application>

现在重新 sync 一下项目，应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了。

 

 

接下来加入 JPushPackage

• RN 0.29.0 以下版本

打开 app 下的 MainActivity，在 ReactInstanceManager 的 build 方法中加入 JPushPackage：

project/android/app/MainActivity.java

 

• RN 0.29.0 以上版本

打开 android-->app-->src 下的 MainApplication.java 文件，然后加入 JPushPackage，参考 demo：

1.  
   // 设置为 true 将不弹出 toast
2.  
   private boolean SHUTDOWN_TOAST = false;
3.  
   // 设置为 true 将不打印 log
4.  
   private boolean SHUTDOWN_LOG = false;
5.  
    
6.  
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
7.  
    
8.  
   @Override
9.  
   protected boolean getUseDeveloperSupport() {
10.  
    return BuildConfig.DEBUG;
11.  
    }
12.  
     
13.  
    @Override
14.  
    protected List<ReactPackage> getPackages() {
15.  
    return Arrays.<ReactPackage>asList(
16.  
    new MainReactPackage(),
17.  
    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
18.  
    );
19.  
    }
20.  
    };
21.  
     

然后在 MainActivity 中加入一些初始化代码即可：

project/android/app/src/java/.../MainActivity.java

1.  
   import android.os.Bundle;
2.  
   import com.facebook.react.ReactActivity;
3.  
   import cn.jpush.android.api.JPushInterface;
4.  
    
5.  
   public class MainActivity extends ReactActivity {
6.  
   ...
7.  
    
8.  
   @Override
9.  
   protected void onCreate(Bundle savedInstanceState) {
10.  
    super.onCreate(savedInstanceState);
11.  
    JPushInterface.init(this);
12.  
    }
13.  
     
14.  
    @Override
15.  
    protected void onPause() {
16.  
    super.onPause();
17.  
    JPushInterface.onPause(this);
18.  
    }
19.  
     
20.  
    @Override
21.  
    protected void onResume() {
22.  
    super.onResume();
23.  
    JPushInterface.onResume(this);
24.  
    }
25.  
     
26.  
    @Override
27.  
    protected void onDestroy() {
28.  
    super.onDestroy();
29.  
    }
30.  
    }

这样就完成了所有的配置。接下来就可以在  JS 中调用插件提供的 API 了。

 

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();
}