❤
npm
Sign UpSign In

@ohayou12/react-native-aliyun-emas

1.2.1 • Public • Published

react-native-aliyun-emas

npm

首先感谢wonday、evan0204的贡献，此库是在wonday库的基础上进行升级维护

阿里云移动推送react-native封装组件

目前已完成Android12的匹配升级，升级到阿里云EMAS的SDK 3.7.4版本

注意EMAS SDK 3.7.4 的Android配置发生了变化，具体参考

修改履历 v1.2.0
  1. Android SDK版本配置优先使用宿主项目配置的版本
  2. 更新阿里云EMAS SDK版本至3.8.7
  3. IOS移除了UTDID

v1.1.0

  1. 完成Android12的匹配
  2. 更新阿里云EMAS SDK版本至3.7.4

v1.0.22

  1. 修正alicloud-android-utdid Android编译错误
  2. 更新阿里云移动推送SDK

v1.0.21

  1. 修正android编译配置

v1.0.20

  1. 升级阿里云移动推送sdk ios v1.9.9

v1.0.19

  1. 更新了第三方辅助通道SDK至3.0.9
  2. 升级阿里云移动推送sdk android v3.1.6
  3. 更新Android buildTools版本至28.0.3

v1.0.18

  1. 更新了第三方辅助通道SDK至3.0.6，支持了OPPO

v1.0.17

  1. add AliyunPush.removeAllListeners()
  2. 修复MIUIUtils类中isMIUI方法android 8.0以上异常

v1.0.16

  1. 修复ios低版本收到通知后闪退问题

v1.0.15

  1. 增加getInitialMessage方法
  2. add sample

[more]

前提

使用本组件前提是注册过阿里云移动推送服务，注册过app并取得了appKey及appSecret, 如果要使用ios版还要向苹果公司申请证书并配置好阿里云上的设置。 这里不详细描述，请参考阿里云移动推送文档

安装

ReactNative 0.59.x及以前

npm install @ohayou12/react-native-aliyun-emas --save
react-native link @ohayou12/react-native-aliyun-emas

ReactNative 0.60.x及以后

yarn add @ohayou12/react-native-aliyun-emas
android配置
  1. 在Project根目录下build.gradle文件中配置maven库URL:
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/"
            name 'aliyun'//一定要添加这个配置
            allowInsecureProtocol = true
        }
        flatDir {
            dirs project(':ohayou12_react-native-aliyun-emas').file('libs')
        }
        // 添加结束
    }
}
  1. 确保settings.gradle中被添加如下代码：
include ':ohayou12_react-native-aliyun-emas'
project(':ohayou12_react-native-aliyun-emas').projectDir = new File(rootProject.projectDir, '../node_modules/@ohayou12/react-native-aliyun-emas/android')
  1. 确保app/build.gradle中被添加如下代码：
dependencies {
    //下面是被添加的代码
    implementation project(':ohayou12_react-native-aliyun-emas')
    //添加结束
}
  1. 确保MainApplication.java中被添加如下代码
// 下面是被添加的代码

import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;

import org.wonday.aliyun.push.AliyunPushPackage;

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.huawei.HuaWeiRegister;
import com.alibaba.sdk.android.push.register.MiPushRegister;
import com.alibaba.sdk.android.push.register.GcmRegister;
// 添加结束
...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            //下面是被添加的代码(如果报错：Native module AliyunPush tried to override AliyunPushModule则不要添加这行)
            new AliyunPushPackage()
            //添加结束
      );
    }
  };

  @Override
  public void onCreate() {
    super.onCreate();
    
    //下面是添加的代码
    this.initCloudChannel(this);
    //添加结束
  }

  // 下面是添加的代码
  /**
   * 初始化阿里云推送通道
   * @param applicationContext
   */
  private void initCloudChannel(final Context applicationContext) {

    // 创建notificaiton channel
    this.createNotificationChannel();
    PushServiceFactory.init(applicationContext);
    CloudPushService pushService = PushServiceFactory.getCloudPushService();
    pushService.setNotificationSmallIcon(R.mipmap.ic_launcher_s);//设置通知栏小图标， 需要自行添加
    pushService.register(applicationContext, "阿里云appKey", "阿里云appSecret", new CommonCallback() {
      @Override
      public void onSuccess(String responnse) {
        // success
      }
      @Override
      public void onFailed(String code, String message) {
        // failed
      }
    });

    // 关于第三方推送通道的设置，请仔细阅读阿里云文档
    // https://help.aliyun.com/document_detail/30067.html?spm=a2c4g.11186623.6.589.598b7fa8vf9qWF

    // 注册方法会自动判断是否支持小米系统推送，如不支持会跳过注册。
    MiPushRegister.register(applicationContext, "小米AppID", "小米AppKey");

    // 注册方法会自动判断是否支持华为系统推送，如不支持会跳过注册。
    HuaWeiRegister.register(this);

    // 接入FCM/GCM初始化推送
    GcmRegister.register(applicationContext, "send_id", "application_id"); 

    // OPPO通道注册
    OppoRegister.register(applicationContext, appKey, appSecret); // appKey/appSecret在OPPO通道开发者平台获取

    // 魅族通道注册
    MeizuRegister.register(applicationContext, "appId", "appkey"); // appId/appkey在魅族开发者平台获取

    // VIVO通道注册
    VivoRegister.register(applicationContext);

  }


  private void createNotificationChannel() {
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
          NotificationManager mNotificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
          // 通知渠道的id
          String id = "1";
          // 用户可以看到的通知渠道的名字.
          CharSequence name = "notification channel";
          // 用户可以看到的通知渠道的描述
          String description = "notification description";
          int importance = NotificationManager.IMPORTANCE_HIGH;
          NotificationChannel mChannel = new NotificationChannel(id, name, importance);
          // 配置通知渠道的属性
          mChannel.setDescription(description);
          // 设置通知出现时的闪灯（如果 android 设备支持的话）
          mChannel.enableLights(true);
          mChannel.setLightColor(Color.RED);
          // 设置通知出现时的震动（如果 android 设备支持的话）
          mChannel.enableVibration(true);
          mChannel.setVibrationPattern(new long[]{100, 200, 300, 400, 500, 400, 300, 200, 400});
          //最后在notificationmanager中创建该通知渠道
          mNotificationManager.createNotificationChannel(mChannel);
      }
  }
  // 添加结束

注意: 如果你使用多个阿里云SDK, 遇到alicloud-android-utdid冲突，

请参考 [这里]

ios配置

  1. 执行react-native link @ohayou12/react-native-aliyun-emas或手工添加node_modules/@ohayou12/react-native-aliyun-emas/ios/RCTAliyunPush.xcodeproj到xcode项目工程

  2. 如果使用了其他aliyun的SDK，则跳过本步骤，否则必须手动添加UTDIDSDK。在Podfile文件中添加pod 'UTDID'，然后执行npx pod-install

  3. 点击项目根节点，在targets app的Build Settings中找到Framework search path, 添加$(PROJECT_DIR)/../node_modules/@ohayou12/react-native-aliyun-emas/ios/libs

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

拖拽node_modules/@ohayou12/react-native-aliyun-emas/ios/libs下列目录到xcode工程的frameworks目录下，选择create folder references。

  • 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];
}
// 添加结束
使用示例

引入模块

import AliyunPush from '@ohayou12/react-native-aliyun-emas';

监听推送事件

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

componentWillUnmount() {
    //移除监听
    AliyunPush.removeListener(this.handleAliyunPushMessage);

    //也可以用移除全部监听
    //AliyunPush.removeAllListeners()
}

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}的对象

};
阿里云SDK接口封装

详细参数说明请参考阿里云移动推送SDK [android版] [ios版]

获取deviceId

示例:

AliyunPush.getDeviceId()
    .then((deviceId)=>{
        //console.log("deviceId:"+deviceId);
    })
    .catch((error)=>{
        console.log("getDeviceId() failed");
    });

绑定账号

参数：

  • account 待绑定账号

示例:

AliyunPush.bindAccount(account)
    .then((data)=>{
        console.log("bindAccount success");
        console.log(JSON.stringify(data));
    })
    .catch((error)=>{
        console.log("bindAccount error");
        console.log(JSON.stringify(error));
    });

解绑定账号

示例:

AliyunPush.unbindAccount()
    .then((result)=>{
        console.log("unbindAccount success");
        console.log(JSON.stringify(result));
    })
    .catch((error)=>{
        console.log("bindAccount error");
        console.log(JSON.stringify(error));
    });

绑定标签

参数：

  • target 目标类型，1：本设备；2：本设备绑定账号；3：别名
  • tags 标签（数组输入）
  • alias 别名（仅当target = 3时生效）

示例:

AliyunPush.bindTag(1,["testtag1","testtag2"],"")
    .then((result)=>{
        console.log("bindTag success");
        console.log(JSON.stringify(result));
    })
    .catch((error)=>{
        console.log("bindTag error");
        console.log(JSON.stringify(error));
    });

解绑定标签

参数:

  • target 目标类型，1：本设备；2：本设备绑定账号；3：别名
  • tags 标签（数组输入）
  • alias 别名（仅当target = 3时生效）

示例:

AliyunPush.unbindTag(1,["testTag1"],"")
    .then((result)=>{
        console.log("unbindTag succcess");
        console.log(JSON.stringify(result));
    })
    .catch((error)=>{
        console.log("unbindTag error");
        console.log(JSON.stringify(error));
    });

查询当前Tag列表

参数:

  • target 目标类型，1：本设备

示例:

AliyunPush.listTags(1)
    .then((result)=>{
        console.log("listTags success");
        console.log(JSON.stringify(result));
    })
    .catch((error)=>{
        console.log("listTags error");
        console.log(JSON.stringify(error));
    });

添加别名

参数:

  • alias 要添加的别名

示例:

AliyunPush.addAlias("testAlias")
    .then((result)=>{
        console.log("addAlias success");
        console.log(JSON.stringify(result));
    })
    .catch((error)=>{
        console.log("addAlias error");
        console.log(JSON.stringify(error));
    });

删除别名

参数:

  • alias 要移除的别名

示例:

AliyunPush.removeAlias("testAlias")
    .then((result)=>{
        console.log("removeAlias success");
        console.log(JSON.stringify(result));
    })
    .catch((error)=>{
        console.log("removeAlias error");
        console.log(JSON.stringify(error));
    });

查询别名列表

示例:

AliyunPush.listAliases()
    .then((result)=>{
        console.log("listAliases success");
        console.log(JSON.stringify(result));
    })
    .catch((error)=>{
        console.log("listAliases error");
        console.log(JSON.stringify(error));
    });

设置桌面图标角标数字 (ios支持，android支持绝大部分手机)

参数:

  • num角标数字，如果要清除请设置0

示例:

AliyunPush.setApplicationIconBadgeNumber(5);

获取桌面图标角标数字 (ios支持，android支持绝大部分手机)

示例:

AliyunPush.getApplicationIconBadgeNumber((num)=>{
    console.log("ApplicationIconBadgeNumber:" + num);
});

同步角标数到阿里云服务端 (仅ios支持)

参数:

  • num角标数字

示例:

AliyunPush.syncBadgeNum(5);

获取用户是否开启通知设定 (ios 10.0+支持)

示例:

AliyunPush.getAuthorizationStatus((result)=>{
    console.log("AuthorizationStatus:" + result);
});

获取初始消息

app在未启动时收到通知后，点击通知启动app, 如果在向JS发消息时，JS没准备好或者没注册listener，则先临时保存该消息， 并提供getInitalMessage方法可以获取，在app的JS逻辑完成后可以继续处理该消息

示例:

async componentDidMount() {
    //监听推送事件
    AliyunPush.addListener(this.handleAliyunPushMessage);
    const msg = await AliyunPush.getInitialMessage();
    if(msg){
        this.handleAliyunPushMessage(msg);
    }
}

componentWillUnmount() {
    AliyunPush.removeListener(this.handleAliyunPushMessage);
}
handleAliyunPushMessage = (e) => {
    .....
}

Readme

Keywords

Package Sidebar

Install

npm i @ohayou12/react-native-aliyun-emas

Repository

github.com/ohayou12/react-native-aliyun-emas

Homepage

github.com/ohayou12/react-native-aliyun-emas#readme

Weekly Downloads

4

Version

1.2.1

License

MIT

Unpacked Size

47.3 MB

Total Files

117

Last publish

Collaborators

  • ohayou12
Try on RunKit
Report malware