next() Packaged Middleware

    react-native-xmpush

    2.0.0 • Public • Published

    react-native-mipush

    该项目基于小米推送,使用前,请先在小米开发者后台注册app,并获取对应的appid与appkey。

    开发环境:xcode8、react-native

    作者

    QQ: 289459798 QQ群: 161263093

    欢迎更多的喜欢开源的小伙伴加入

    安装

    // rn > 0.6.x
    npm install react-native-xmpush --save 
    
    // rn > 0.4.x
    npm install react-native-xmpush@0.2.4 --save 
    
    // rn < 0.4.x
    npm install react-native-xmpush@0.1.2 --save 
    react-native link
    

    android

    项目的AndroidManifest.xml文件中增加下面代码:

    // 一下代码放在 applacation 标签下
    <meta-data android:name="MIPUSH_APPID" android:value=":1111"/>
            <meta-data android:name="MIPUSH_APPKEY" android:value=":2222"/>
     
    // 1111 替换成在小米申请的appid
    // 2222 替换成在小米申请的appkey
     
    // 千万注意要保留数字前面的冒号

    ios

    ==必须通过xcode8开发的项目==

    ios需要先制作推送证书,具体教程请自行百度。

    本项目是基于RCTPushNotification,请将RCTPushNotification拖动到Libraries目录下。

    添加所需依赖库:

    • UserNotifications.framework
    • libresolv.dylib(tbd)
    • libxml2.dylib(tbd)
    • libz.dylib(tbd)
    • SystemConfiguration.framework
    • MobileCoreServices.framework
    • CFNetwork.framework
    • CoreTelephony.framework

    targetCapabilities选项卡打开Push Notifications

    targetBuild Phases选项卡添加Link Binary With Libraries:

    libRCTPushNotification.a libRCTMIPushModule.a

    在targets->Build Settings下面搜索 Header Search Paths,添加

    $(SRCROOT)/../node_modules/react-native-xmpush/ios/RCTMIPushModule

    $(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS

    设置为 recursive

    打开工程下Info.plist文件为源代码形式打开,添加以下信息:

    <key>MiSDKAppID</key>
    <string>1000888</string>
    <key>MiSDKAppKey</key>
    <string>500088888888</string>
    <key>MiSDKRun</key>
    <string>Online</string>
    

    修改 AppDelegate.m 文件:

    ...
    #import "RCTMIPushModule.h"
    #import "RCTPushNotificationManager.h"
    ...
     
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        ...
       [RCTMIPushModule application:application didFinishLaunchingWithOptions:launchOptions];
        ...
    }
     
    - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
    {
     
      [RCTMIPushModule application:application didRegisterUserNotificationSettings:notificationSettings];
      ...
    }
     
    - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
    {
      [RCTMIPushModule application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
      ...
    }
     
    - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
    {
      [RCTMIPushModule application:application didReceiveRemoteNotification:notification];
      ...
    }
     
    - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
      [RCTMIPushModule application:application didReceiveLocalNotification:notification];
      ...
    }
     
    // ios 10
    // 应用在前台收到通知
    - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler {
      [RCTMIPushModule userNotificationCenter:center willPresentNotification:notification withCompletionHandler:completionHandler];
      ...
    }
     
    // 点击通知进入应用
    - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler {
      [RCTMIPushModule userNotificationCenter:center didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
      ....
      completionHandler();
    }
     

    RN中使用

    Demo:

    android

    ...
     
    import MIPush from 'react-native-mipush';
     
    ...
    componentWillUnmount() {
     
        MIPush.unsetAlias("oooooo");
        MIPush.removeEventListener("xmpush_click");
        MIPush.removeEventListener("xmpush_notify");
    }
     
    componentDidMount() {
     
        MIPush.setAlias("oooooo");
     
        MIPush.addEventListener("xmpush_click", (notification) => {
     
          console.log("app运行过程中点击通知:", notification);
        });
     
        MIPush.addEventListener("xmpush_notify", (notification) => {
     
          console.log("app接收到通知:", notification);
        });
     
        MIPush.getInitialNotification((notification) => {
     
          console.log("app关闭时获取点击通知消息:", notification);
     
        });
     
      }

    ios

    ...
    componentWillUnmount() {
     
        MIPush.unsetAlias("bbbbbb");
        MIPush.removeEventListener("notification");
      }
     
      componentDidMount() {
     
        MIPush.setAlias("bbbbbb");
     
        MIPush.setBadgeNumber(0);   // 每次进入app将角标设置为0
        MIPush.addEventListener("notification", (notification) => {
     
          console.log("app接收到通知:", notification);
          
          // 弹出确认框
        });
     
        MIPush.getInitialNotification((notification) => {
     
          console.log("app关闭时获取点击通知消息:", notification);
          // 弹出确认框
        });
     
      }
      ...

    暂支持的所有方法:

    /**
     * 设置别名
     * @param text
     */
    setAlias(text);
     
    /**
     * 注销别名
     * @param text
     */
    unsetAlias(text);
     
    /**
     * 设置主题,类似tag
     * @param text
     */
    subscribe(text);
     
    /**
     * 注销主题
     * @param text
     */
    unsubscribe(text);
     
    /**
     * 设置账号,一个账号需要多台设备接收通知
     * @param text
     */
    setAccount(text);
     
    /**
     * 注销账号
     * @param text
     */
    unsetAccount(text);
     
    /**
     *
     * @param type
     * ios :
     * notification => 监听收到apns通知
     * localNotification => 监听收到本地通知
     * register => 注册deviceToken 通知
     *
     * android :
     * xmpush_notify => 监听收到推送
     * xmpush_click => 监听推送被点击
     * xmpush_message => 监听收到透传消息
     * @param handler
     */
    addEventListener(type, handler);
     
    removeEventListener(type);
     
    /**
     * 发送一个本地通知
     * @param notification
     */
    presentLocalNotification(notification);
     
    /**
     * 清除指定通知
     * @param notifyId
     * ios : userInfo
     * android : id
     */
    clearNotification(notifyId);
     
    /**
     * 清除所有通知
     */
    clearNotifications();
     
    /**
     * 设置角标,仅支持ios
     * @param num
     */
    setBadgeNumber(num);
     
    /**
     * 通过点击通知启动app
     * @param handler
     */
    getInitialNotification(handler);
     

    Install

    npm i react-native-xmpush

    DownloadsWeekly Downloads

    3

    Version

    2.0.0

    License

    ISC

    Unpacked Size

    84.9 MB

    Total Files

    2907

    Last publish

    Collaborators

    • jszh
    • daxiong123
    • rambos
    • a289459798