react-native-aliyun-push RN项目推送详
安装
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也测试过没问题，这里就不上图了
如果文章有什么错误的地方，请多多指教。
