  
  // first install 
  npm install @react-native-community/push-notification-ios -s
  npm install react-native-getui-latest -s

  // then link
  react-native link @react-native-community/push-notification-ios
  react-native link react-native-getui-latest

Config

Android

目前android只支持在线接收个推推送消息，不支持厂商推送，消息到达后sdk会做相关处理并展示至系统通知栏中，RN端不需做任何处理。

1、在MainActivity.java下添加如下代码:


import android.os.Bundle;   // add this
import com.reactlibrary.ReactNativeGetuiLatestModule;  // add this
public class MainActivity extends ReactActivity {
    // add this
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ReactNativeGetuiLatestModule.setMainApplication(this);   // 如果需RN端手动启动sdk添加此行
        // ReactNativeGetuiLatestModule.initPush(this);  // 原生端自启动添加此行
    }
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "demo";
    }
}

2、配置GETUI_APPID

android/app/build.gradle文件中的 android.defaultConfig中的manifestPlaceholders添加相关参数，如下所示:

  defaultConfig {
      manifestPlaceholders = [          
          GETUI_APPID       : "your appid",
      ]        
  }

android/app/src/main/AndroidManifest.xml添加如下内容:

<application
...
<!--此项需设置为true-->
android:allowBackup="true"   
...
>
<meta-data
    android:name="PUSH_APPID"
    android:value="your appid" />
</application>

3、设置gradle版本、minSdkVersion

打开android/build.gradle将gradle版本设置为4.0.1及以上,或使用3.3.3 、3.4.3 、3.5.4 、 3.6.4版

本;minSdkVersion设置为19，如下所示：


dependencies {
        classpath 'com.android.tools.build:gradle:3.3.3'
}

// 设置minSdkVersion
ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 19      // 修改此项
    compileSdkVersion = 28
    targetSdkVersion = 28
    supportLibVersion = "28.0.0"
}

4、设置推送图标

客户端必须配置 push_small.png 资源文件，若客户端无该文件，会导致通知栏消息无法展示。

设置通知栏及通知栏顶部图标：为了修改默认的通知图标以及通知栏顶部提示小图标，请务必在资源目录的

res/drawable-ldpi/、res/drawable-mdpi/、res/drawable-hdpi/、res/drawable-xhdpi/、res/drawable-

xxhdpi/ 等各分辨率目录下，放置相应尺寸的文件名为 push.png 和 push_small.png 的图片（该图片内容为您应

用自定义的图标文件），如图所示：


Getui_SDK_Demo_AS_official/
    |- app/
    |    |- src/
    |       |- main/
    |         |- res/
    |             |- drawable-hdpi/
    |                 |- push.png
    |                 |- push_small.png
    |             |- drawable-ldpi/
    |                 |- push.png
    |                 |- push_small.png
    |             |- drawable-mdpi
    |                 |- push.png
    |                 |- push_small.png
    |             |- drawable-xhdpi
    |                 |- push.png
    |                 |- push_small.png
    |             |- drawable-xxhdpi
    |                 |- push.png
    |                 |- push_small.png
    | ......

5、添加个推 maven 库地址

打开android/build.gradle,在allprojects.repositories 块中，添加个推 maven 库地址，如下所示：


buildscript {
    ...
}

allprojects {
    repositories {
        ...
        // 添加此项
        maven {
            url "https://mvn.getui.com/nexus/content/repositories/releases/"
        }
        ...
    }
}

IOS

ios端支持厂商推送(需要在App Store配置好推送证书)及个推推送，对于厂商推送已在原生端处理好

调用系统通知栏，个推推送需在RN端通过@react-native-community/push-notification-ios调用系

统通知栏。

1、GTSDK导入

打开工程，将GTSDK导入，详见下图所示:

点击add

在导入时，Xcode正常情况下会自动添加引用，但是偶尔也会不添加，注意检查下图中的引用路径，

如果报错找不到库或者头文件，一般都是下面的引用没有添加。

2、在项目设置中添加以下系统库支持：

libc++.tbd
libz.tbd
libsqlite3.tbd
libresolv.tbd
Security.framework
MobileCoreServices.framework
SystemConfiguration.framework
CoreTelephony.framework
AVFoundation.framework
CoreLocation.framework
UserNotifications.framework (iOS 10 及以上需添加，使用 Optional 方式接入)

3、开启推送功能

点击下图中的“+”添加以下配置：Access WiFi Information、Push Notifications、Background Modes -> Remote

notifications. 详见下图所示：

4、相关原生代码添加

找到工程中的AppDelegate.h添加以下内容：


#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
// add this
#import <GTSDK/GeTuiSdk.h>
#import <UserNotifications/UNUserNotificationCenter.h>
#define kGtAppId @"your appid"
#define kGtAppKey @"your appkey"
#define kGtAppSecret @"your appsecret"
#import "RNGetuiPush.h"
// 添加UNUserNotificationCenterDelegate、GeTuiSdkDelegate
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate, GeTuiSdkDelegate>

@property (nonatomic, strong) UIWindow *window;

@end

找到工程中的AppDelegate.m添加以下内容：

...
// add this
#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // 接入个推
  [GeTuiSdk startSdkWithAppId:kGtAppId appKey:kGtAppKey appSecret:kGtAppSecret delegate:self launchingOptions:launchOptions];
  // 注册远程通知
  [GeTuiSdk registerRemoteNotification: (UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge)];
  ...
  [self.window makeKeyAndVisible];
  // add this
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;
  return YES;
}


#pragma mark - 个推相关添加
/// 收到透传消息
/// @param userInfo    推送消息内容
/// @param fromGetui   YES: 个推通道  NO：苹果apns通道
/// @param offLine     是否是离线消息，YES.是离线消息
/// @param appId       应用的appId
/// @param taskId      推送消息的任务id
/// @param msgId       推送消息的messageid
/// @param completionHandler 用来在后台状态下进行操作（通过苹果apns通道的消息 才有此参数值）
- (void)GeTuiSdkDidReceiveSlience:(NSDictionary *)userInfo fromGetui:(BOOL)fromGetui offLine:(BOOL)offLine appId:(NSString *)appId taskId:(NSString *)taskId msgId:(NSString *)msgId fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
    [[NSNotificationCenter defaultCenter]postNotificationName:DID_RECEIVE_GTPAYLOAD_NOTIFICATION object:@{@"type":@"payload",@"userInfo":userInfo}];
}


#pragma mark - @react-native-community/push-notification-ios相关添加

// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the notification event. You must call the completion handler after handling the remote notification.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}
// Required for localNotification event
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
         withCompletionHandler:(void (^)(void))completionHandler
{
  [RNCPushNotificationIOS didReceiveNotificationResponse:response];
}
-(void)userNotificationCenter:(UNUserNotificationCenter *)center
willPresentNotification:(UNNotification *)notification
withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
{
  completionHandler(UNNotificationPresentationOptionSound | UNNotificationPresentationOptionAlert | UNNotificationPresentationOptionBadge);
}

Usage

import { NativeAppEventEmitter } from 'react-native';
import GetuiSdk from 'react-native-getui-latest'
import PushNotificationIOS from '@react-native-community/push-notification-ios';

const {
	startSdk,    // 手动启动sdk  android only 
	clientId,		 // 获取cid
	version,		 // 获取版本号
	isPushTurnedOn,   // 获取sdk运行状态 
} = GetuiSdk;

// 手动启动示例  --android原生端调用ReactNativeGetuiLatestModule.setMainApplication(this);

startSdk( isSuccessed => {
	if(isSuccessed) {
		clientId(cid => {
			console.log(cid)
		})
	}
})

// 自启动示例  --android原生端调用ReactNativeGetuiLatestModule.initPush(this);

clientId( cid => {
	console.log(cid)
})

// ios端对于个推的消息处理
componentDidMount() {
	NativeAppEventEmitter.addListener('receiveRemoteNotification', (notification) => {
			switch(notification.type) {
				case 'paylaod':
					PushNotificationIOS
						.presentLocalNotification(notification.userInfo)   // 取决于userInfo数据结构  
					break;
				default: 
					break;
			}
		})
}

问题反馈

问题反馈至Meyun

Keywords

FAQs

What is react-native-getui-latest?

Is react-native-getui-latest popular?

Is react-native-getui-latest well maintained?

Package last updated on 29 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-native-getui-latest