安装

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

npm示例图.png
link示例图.png

link命令完成之后你会发现有几个文件自动帮你修改了

如：

修改1.png 修改2.png 修改3.png 修改4.png
修改5.png

好的，到这里我们基本安装依赖完成了，接着我们就可以敲敲代码，挖挖坑。

按GitHub官方文档走

当我们安装完react-native-aliyun-push，用AndroidStudio打开项目的时候，你会发现一大推报错，我们先别急。先配置一下Android原生的相关文件代码

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/"
        }
        flatDir {
            dirs project(':react-native-aliyun-push').file('libs')
        }
        // 添加结束
    }
}

添加完之后，我们就可以把Android原生项目重新Build一下。build完成之后，所有error基本消失了。

接着我们在MainApplication.java中添加一点代码

// 下面是被添加的代码
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.register.HuaWeiRegister;
import com.alibaba.sdk.android.push.register.MiPushRegister;
// 添加结束
...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            //下面是被添加的代码
            new AliyunPushPackage()
            //添加结束
      );
    }
  };

  @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());
  }
  // 添加结束

我们把相关的ID和Key填完之后，Android配置的方面是基本完成

IOS配置

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

如果前面用了link命令，查看一下是否已自动添加。已添加
请忽略。为添加请手动添加。

示例图.png

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

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

示例图.png 示例图.png

3.点击项目根节点，在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

添加完毕.png

好的，到这里IOS配置基本完成，我们现在可以敲敲IOS的原生代码了。

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];
}
// 添加结束

build一下，发现有个错误 "AliyunPushManager.h"file not found

错误图.png

这个错误应该是找不到头文件了，这个错误和项目有关，一般项目都不会遇到吧，官方文档也没有查到任何答案。之前有遇到类似的问题，琢磨了一会。

示例图.png

Project navigator->Build Settings->Search Paths
Framework search paths 添加

$(PROJECT_DIR)/../node_modules/react-native-aliyun-push/ios/lib

Header search paths 添加

$(SRCROOT)/../node_modules/react-native-aliyun-push/ios/RCTAliyunPush

重新build一下。error就解决了，安装真机就可以敲RN代码试试了。

示例图.png

推送功能用真机调试，看到这里，ios的阿里云推送是初期化成功了。

测试

我们首先测试一下消息推送
引入模块

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

监听推送事件

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

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

handleAliyunPushMessage = (e) => {
        console.log(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}的对象

};

示例图.png 示例图.png

再来测试一下通知推送

先获取本机的AliyunPush deviceId

AliyunPush.getDeviceId((deviceId)=>{
    console.log("AliyunPush DeviceId:" + deviceId);
});

deviceId.png

获取到AliyunPush deviceId之后，我们就可以测试一下通知了。

示例图.png 示例图.png 示例图.png

申请证书方面就不多讲解了。官方给出了很详细的文章。
到这里IOS的通知是没有任何问题的。
Android也测试过没问题，这里就不上图了

如果文章有什么错误的地方，请多多指教。