即时通信 IM React Native-推送服务（Push）-文档中心-腾讯云

步骤1：创建一个 React Native 项目（已有项目可忽略此步骤） 
npx react-native@latest init MyReactNativeApp
步骤2：集成 @tencentcloud/react-native-push
// npm
npm install @tencentcloud/react-native-push --save
// yarn
yarn add @tencentcloud/react-native-push
步骤3：注册推送
复制下面的代码到 App.tsx，并将代码中的 SDKAppID 和 appKey 分别替换为您应用信息中的 SDKAppID 和 客户端密钥。
﻿
import Push from '@tencentcloud/react-native-push';
﻿
const SDKAppID = 0; // 您的 SDKAppID
const appKey = ''; // 客户端密钥
﻿
if (Push) {
  Push.registerPush(SDKAppID, appKey, (data) => {
      console.log('registerPush ok', data);
      Push.getRegistrationID((registrationID) => {
        console.log('getRegistrationID ok', registrationID);
      });
    }, (errCode, errMsg) => {
      console.error('registerPush failed', errCode, errMsg);
    }
  );
  
  // 监听在线推送
  Push.addPushListener(Push.EVENT.MESSAGE_RECEIVED, (res) => {
    // res 为消息内容
    console.log('message received', res);
  });

  // 监听在线推送被撤回
  Push.addPushListener(Push.EVENT.MESSAGE_REVOKED, (res) => {
    // res 为被撤回的消息 ID
    console.log('message revoked', res);
  });
}
步骤4：推送参数配置
iOS
Android
请将您在厂商配置步骤中, 获取到的 iOS APNs 推送证书，上传至 IM 控制台。IM 控制台会为您分配一个证书 ID，见下图：
﻿
在 MyReactNativeApp/ios/MyReactNativeApp 目录下，新建 Resources 文件夹，并新建 timpush-configs.json 文件。
编辑 timpush-configs.json，填入控制台证书 ID，如下：
{
  "businessID": "您的证书ID"
}
XCode 打开 MyReactNativeApp 项目，右键点击项目 > Add Files to "MyReactNativeApp"，将 Resources 目录添加到工程。
完成控制台厂商推送信息填写后，从控制台下载 timpush-configs.json 文件并添加到项目的 android/app/src/main/assets 目录下，如果该目录不存在，请手动创建。
1.选择下载配置文件 timpush-configs.json
2.添加到工程
﻿
﻿
﻿
﻿
﻿
﻿
步骤5：客户端代码和厂商配置
iOS
Android
1. XCode 打开 MyReactNativeApp 项目，右键点击 Libraries > Add Files to "MyReactNativeApp"，将 node_modules/@tencentcloud/react-native-push/ios 目录下的 TencentCloudPush.h 和 TencentCloudPush.mm 添加到工程。
2. 编辑 MyReactNativeApp/ios/Podfile，添加依赖。
target 'MyReactNativeApp' do
  # Uncommment the next line if you're using Swift or would like to use dynamic frameworks
  use_frameworks!
  use_modular_headers!
  
  # Pods for Example
  pod 'TXIMSDK_Plus_iOS_XCFramework'
  pod 'TIMPush', '8.2.6325'
end
3. 安装 TIMPush 组件。
pod install 
# 如果无法安装最新版本，执行以下命令更新本地的 CocoaPods 仓库列表
pod repo update
4. 在App中添加推送权限，请在 Xcode 项目中启用推送通知功能。打开 Xcode 项目，在 Project > Target > Capabilities 页面中点击红框中的加号按钮，然后选择并添加 Push Notifications 。
﻿
5. 添加后的结果如图中红框所示。
﻿
1. 使用 Android Studio 打开 MyReactNativeApp 目录下的 android 项目。
2. 如果您的项目入口文件是 MainApplication.kt，请按如下方式修改：
...
import com.tencent.qcloud.rntimpush.TencentCloudPushApplication

// Replace Application with TencentCloudPushApplication
class MainApplication : TencentCloudPushApplication(), ReactApplication {
  ...
  //  add TencentCloudPushPackage to the list of packages returned in ReactNativeHost's getPackages() method
  override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
        // Packages that cannot be autolinked yet can be added manually here, for example:
        // add(MyReactNativePackage())
    }
}
3. 如果您的项目入口文件是 MainApplication.java，请按如下方式修改：
...
import com.tencent.qcloud.rntimpush.TencentCloudPushApplication;

// Replace Application with TencentCloudPushApplication
public class MainApplication extends TencentCloudPushApplication implements ReactApplication {
  ...
  // add TencentCloudPushPackage to the list of packages returned in ReactNativeHost's getPackages() method
  @Override
  protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    return packages;
  }
  ...

4.  编辑 android/build.gradle 文件，更新 repositories，dependencies 和 allprojects。
buildscript {
    ...
    repositories {
        ...
        google()
        mavenCentral()
        maven { url 'https://mirrors.tencent.com/nexus/repository/maven-public/' }
        // 配置 HMS Core SDK 的 Maven 仓地址。
        maven { url 'https://developer.huawei.com/repo/' }
        maven { url 'https://developer.hihonor.com/repo' }
    }
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.3.15'
        classpath 'com.huawei.agconnect:agcp:1.9.1.301'
        classpath 'com.hihonor.mcs:asplugin:2.0.1.300'
    }
}

allprojects {
    repositories {
        mavenCentral()
        maven { url 'https://mirrors.tencent.com/nexus/repository/maven-public/' }
        // 配置 HMS Core SDK 的 Maven 仓地址。
        maven { url 'https://developer.huawei.com/repo/' }
        maven { url 'https://developer.hihonor.com/repo' }
    }
}
...
5.  编辑 android/app/build.gradle 文件，更新 plugin 和 defaultConfig。  
...
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.huawei.agconnect'
apply plugin: 'com.hihonor.mcs.asplugin'
...
android {
    ...
    defaultConfig {
        ...
        manifestPlaceholders = [
            "VIVO_APPKEY" : "0",
            "VIVO_APPID" : "0",
            "HONOR_APPID" : ""
        ]
    }
}
6. 以上操作都完成后，选择 File > Sync Project with Gradle Files。
步骤6: 监听 AppState 变化，获取离线推送扩展信息
在 App.tsx 内监听 AppState 变化，当设备收到离线推送，拉起 App 时，业务侧可通过getNotificationExtInfo接口获取推送扩展信息。
const App = () => {
  useEffect(() => {
    const handleAppStateChange = (nextAppState: string) => {
      if (nextAppState === 'active') {
        console.log('App.tsx | AppState active');
        if (Push) {
          Push.getNotificationExtInfo((extInfo: string) => {
            console.log('App.tsx | getNotificationExtInfo ok', extInfo);
          });
        }
      }
    };
    AppState.addEventListener('change', handleAppStateChange);
    return () => {
      // AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []);
};
步骤7: 在真机上运行（测试前请务必打开手机通知权限，允许应用通知。）
从项目根目录开始，在命令提示符中运行以下命令，在设备上安装并启动您的应用程序：
For Android:
npm run android
For iOS:
npm run ios
步骤8：消息推送触达统计
如果您需要统计触达数据，请按照如下完成配置：
华为
荣耀
vivo
魅族
iOS
﻿
回执地址：https://api.im.qcloud.com/v3/offline_push_report/huawei
注意：
华为推送证书 ID <= 11344 ，使用华为推送 v2 版本接口，不支持触达和点击回执，请重新生成更新证书 ID。
﻿
回执地址：https://api.im.qcloud.com/v3/offline_push_report/honor
回调地址配置
回执 ID 配置 IM 控制台
﻿
﻿
﻿
回执地址：https://api.im.qcloud.com/v3/offline_push_report/vivo
﻿
﻿
﻿
打开回执开关
配置回执地址
﻿
﻿
﻿
﻿
﻿
﻿
回执地址：https://api.im.qcloud.com/v3/offline_push_report/meizu
注意：
打开回执开关后，请务必确保回执地址正确配置。不配置或者配置地址错误，都会影响推送功能。
iOS 端推送触达统计配置，请参见 统计推送抵达率。
其余支持厂商不需要配置，FCM 暂不支持推送统计功能。
1.选择下载配置文件 timpush-configs.json	2.添加到工程
回调地址配置	回执 ID 配置 IM 控制台
回执地址：`https://api.im.qcloud.com/v3/offline_push_report/vivo`
React Native

本页目录：

步骤1：创建一个 React Native 项目（已有项目可忽略此步骤）

步骤2：集成 @tencentcloud/react-native-push

步骤3：注册推送

步骤4：推送参数配置

步骤5：客户端代码和厂商配置

步骤6: 监听 AppState 变化，获取离线推送扩展信息

步骤7: 在真机上运行（测试前请务必打开手机通知权限，允许应用通知。）

步骤8：消息推送触达统计
