Home

Awesome

小米 Push 的 React Native 封装。

安装

npm install --save react-native-mipush
rnpm link react-native-mipush

Android

// ...
public class MainActivity extends ReactActivity {
    private MiPushPackage mMiPushPackage;            <---- 添加

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        mMiPushPackage = new MiPushPackage(this);    <---- 添加
        super.onCreate(savedInstanceState);
    }

    @Override
    protected void onNewIntent(Intent intent) {      <---- 添加这个方法
        super.onNewIntent(intent);
        setIntent(intent);
        mMiPushPackage.onIntent(intent);
    }

    // ...
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.asList(
            new MainReactPackage(),
            mMiPushPackage,         // <------ 修改自动生成的 new MiPushPackage
    // ...

注意:由于小米的 AppID 和 AppKey 都是纯数字,需要在前面加上 \ 来转义!

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.applean.apprunner"
    android:versionCode="1"
    android:versionName="1.0.0">
    <application
      android:name="com.xiaomi.push.reactnative.MiPushApplication"  <----- 这里

      .... 添加以下两行,替换称自己的 APP_ID 和 APP_KEY

      <meta-data android:value="\ 12345678901234567890" android:name="MIPUSH_APP_ID" />
      <meta-data android:value="\ 12345678" android:name="MIPUSH_APP_KEY" />

iOS

Info.plist 用文本编辑器打开,添加以下代码:

<dict>
    <key>MiSDKAppID</key>
    <string>1000888</string>   <---- 替换为自己的
    <key>MiSDKAppKey</key>
    <string>500088888888</string>   <---- 替换为自己的
    <key>MiSDKRun</key>
    <string>Online</string>    <---- Online 表示正式环境,Debug 表示 Sandbox 环境
</dict>

AppDelegate.m 添加以下代码

#import "RCTMiPush.h"
// ...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...
    NSDictionary *initialProperties = [RCTMiPush initAndGetInitialPropertiesFromLaunchOptions:launchOptions];
    // ...
    RCTRootView *rootView =
        [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                    moduleName:@"RNTest"
                             initialProperties:initialProperties  // <-- 修改这里
                              launchOptions:launchOptions];
    // ...
}

// 添加以下这些代码
#pragma mark UIApplicationDelegate
- (void)application:(UIApplication *)app didFailToRegisterForRemoteNotificationsWithError:(NSError *)err
{
  // 注册APNS失败
  [RCTMiPush didFailToRegisterForRemoteNotificationsWithError:err];
}
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
  [RCTMiPush didRegisterUserNotificationSettings:notificationSettings];
}
// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [RCTMiPush didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the notification event.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
{
  [RCTMiPush didReceiveRemoteNotification:notification];
}
// Required for the localNotification event.
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
  [RCTMiPush didReceiveLocalNotification:notification];
}

JS 中使用

由于目前还没有对 iOS 和 Android 版本做接口统一,所以两个平台有所区别,以后版本有可能修改为统一接口。

1.引入模块

import MiPush from 'react-native-mipush'

2.获取启动参数,用于响应点击 Push 消息跳转到应用内

方法1:

    MiPush.getInitialMessage()
    .then((message) => {
      console.log('===== initial push:', message)
    })

方法2: 通过根 Component 的 props 获取

3.启动后点击的新消息

    DeviceEventEmitter.addListener("xiaomipush", this._handlePush)

两个平台参数没有统一,目前需要自己分别处理。

4.启动 Push 代码

Android: 已经在 application 中启动

iOS:

    MiPush.registerMiPushAndConnect(true, 0)

接口文档

待写。

限制

由于 React Native 的 JS 代码只有 UI 在前台时才可执行,所以在 Activity 在前台时能够处理所有消息,不在前台时只能处理点击打开界面的通知栏消息。

License

MIT.