react-native-aliyun-push (极光推送同胞阿里云推送)

个人感觉阿里云推送比极光推送要好配置些(有免费5万条的推送哦,感觉像是打广告哈哈~),需要的可以看下😄

react-native-aliyun-push需要注册(请参考阿里云移动推送文档)

安装

npm install react-native-aliyun-push --save
react-native link react-native-aliyun-push

android配置

  1. 在android根目录下build.gradle配置以下代码:
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        // 下面是添加的代码
        maven {
            url "http://maven.aliyun.com/nexus/content/repositories/releases/"
        }
        flatDir {
            dirs project(':react-native-aliyun-push').file('libs')
        }
        // 添加结束
    }
}

  1. 在settings.gradle中添加以下代码:
include ':react-native-aliyun-push'
project(':react-native-aliyun-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-aliyun-push/android')

  1. 在app/build.gradle中添加以下代码:
dependencies {
    //下面是被添加的代码
    compile project(':react-native-aliyun-push')
    //添加结束
}

4.在AndroidManifest.xml文件中的 application 标签下添加以下代码:

<meta-data android:name="com.alibaba.app.appkey" android:value="********"/> <!-- 你自己的阿里云- appKey -->
<meta-data android:name="com.alibaba.app.appsecret" android:value="********"/> <!-- 你自己的阿里云-appSecret -->
  1. 在MainApplication.java中被添加以下代码
// 下面是被添加的代码
import org.wonday.aliyun.push.AliyunPushPackage;(link 以后一般是已经有的了)
import com.alibaba.sdk.android.push.CloudPushService;
import com.alibaba.sdk.android.push.CommonCallback;
import com.alibaba.sdk.android.push.noonesdk.PushServiceFactory;
import com.alibaba.sdk.android.push.register.HuaWeiRegister;
import com.alibaba.sdk.android.push.register.MiPushRegister;
// 添加结束
...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            //下面是被添加的代码
            new AliyunPushPackage()  (link 以后一般是已经有的了)
            //添加结束
      );
    }
  };

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);

    //下面是添加的代码
    this.initCloudChannel();
    //添加结束
  }

  // 下面是添加的代码
  /**
   * 初始化阿里云推送通道
   * @param applicationContext
   */
  private void initCloudChannel() {
    PushServiceFactory.init(this.getApplicationContext());
    CloudPushService pushService = PushServiceFactory.getCloudPushService();
    pushService.setNotificationSmallIcon(R.mipmap.ic_launcher_s);//设置通知栏小图标, 需要自行添加
    pushService.register(this.getApplicationContext(), "你自己的阿里云appKey", "你自己的阿里云appSecret", new CommonCallback() {
      @Override
      public void onSuccess(String responnse) {
        // success
      }
      @Override
      public void onFailed(String code, String message) {
        // failed
      }
    });

    // 注册方法会自动判断是否支持小米系统推送,如不支持会跳过注册。
    MiPushRegister.register(this.getApplicationContext(), "小米AppID", "小米AppKey");
    // 注册方法会自动判断是否支持华为系统推送,如不支持会跳过注册。
    HuaWeiRegister.register(this.getApplicationContext());
  }
  // 添加结束

ios配置

  1. 添加node_modules/react-native-aliyun-push/ios/RCTAliyunPush.xcodeproj到xcode项目工程

  2. 添加阿里云移动推送SDK

拖拽node_modules/react-native-aliyun-push/ios/libs下列目录到xcode工程的frameworks目录下,将copy items if needed打勾。 注意:从阿里云下载的SDK中UTDID.framework有问题,编译会报错,请使用react-native-aliyun-push中内置的版本。

请自行下载:https://gitee.com/cuic1/react-native-aliyun-push-master

  • AlicloudUtils.framework
  • CloudPushSDK.framework
  • UTDID.framework
  • UTMini.framework
  1. 点击项目根节点,在targets app的BuildPhase的Link Binary With Libraries中添加公共包依赖
  • libz.tbd
  • libresolv.tbd
  • libsqlite3.tbd
  • CoreTelephony.framework
  • SystemConfiguration.framework
  • UserNotifications.framework

同时确保targets app的BuildPhase的Link Binary With Libraries包含

  • AlicloudUtils.framework
  • CloudPushSDK.framework
  • UTDID.framework
  • UTMini.framework
  1. 修改AppDelegate.m添加如下代码
#import "AliyunPushManager.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

...

  // 下面是添加的代码
  [[AliyunPushManager sharedInstance] setParams:@"阿里云appKey"
                                      appSecret:@"阿里云appSecret"
                                   lauchOptions:launchOptions
              createNotificationCategoryHandler:^{
                //create customize notification category here
  }];
  // 添加结束

  return YES;
}

// 下面是添加的代码

// APNs注册成功回调,将返回的deviceToken上传到CloudPush服务器
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [[AliyunPushManager sharedInstance] application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

// APNs注册失败回调
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
  [[AliyunPushManager sharedInstance] application:application didFailToRegisterForRemoteNotificationsWithError:error];
}

// 打开/删除通知回调
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler
{
  [[AliyunPushManager sharedInstance] application:application didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

// 请求注册设定后,回调
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
  [[AliyunPushManager sharedInstance] application:application didRegisterUserNotificationSettings:notificationSettings];
}
// 添加结束
@end

使用示例

引入模块

import AliyunPush from 'react-native-aliyun-push';

监听推送事件

componentDidMount() {
    //监听推送事件
    AliyunPush.addListener(this.handleAliyunPushMessage);
}

componentWillUnmount() {
    //
    AliyunPush.removeListener(this.handleAliyunPushMessage);
}

handleAliyunPushMessage = (e) => {
    console.log("Message Received. " + JSON.stringify(e));

    //e结构说明:
    //e.type: "notification":通知 或者 "message":消息
    //e.title: 推送通知/消息标题
    //e.body: 推送通知/消息具体内容
    //e.actionIdentifier: "opened":用户点击了通知, "removed"用户删除了通知, 其他非空值:用户点击了自定义action(仅限ios)
    //e.extras: 用户附加的{key:value}的对象

};

写完以后亲测是没有问题的,所以小伙伴们出错过的,多配置几次😄
觉得有用的小伙伴点个关注和小红心就行😄,么么哒。

友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容