tencent cloud

文档反馈

快速接入

最后更新时间:2025-01-02 14:21:53

    效果展示

    小米 11 Pro
    
    
    
    iPhone 13
    
    
    
    三星 Galaxy A23 海外版(Google FCM 推送)
    
    
    

    步骤1:创建一个 React Native 项目(已有项目可忽略此步骤)

    npx @react-native-community/cli@latest init MyReactNativeApp --version 0.75.0

    步骤2:进入 MyReactNativeApp 目录,集成 @tencentcloud/react-native-push

    npm
    yarn
    npm install @tencentcloud/react-native-push --save
    yarn add @tencentcloud/react-native-push

    步骤3:注册推送

    复制下面的代码到 App.tsx,并将 SDKAppIDappKey替换为您的应用的信息。
    说明:
    registerPush注册推送服务成功后,您可通过 getRegistrationID 获取推送 ID 标识, 即 RegistrationID。您可以向指定的 RegistrationID 推送消息。
    
    
    
    import { TUILogin } from '@tencentcloud/tui-core';
    import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
    import Push from '@tencentcloud/react-native-push';
    
    const SDKAppID = 0; // 您的 SDKAppID
    const appKey = ''; // 客户端密钥
    const userID = ''; // 您的 userID
    const userSig = ''; // 对 UserID 加密后生成的签名串
    
    TUILogin.login({
    SDKAppID,
    userID,
    userSig,
    useUploadPlugin: true,
    framework: 'rn',
    }).then(() => {
    if (Push) {
    Push.setRegistrationID(userID, () => {
    console.log('setRegistrationID ok', userID);
    });
    
    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.NOTIFICATION_CLICKED, (res) => {
    console.log('notification clicked', res);
    // 解析扩展信息,跳转到相应的会话
    try {
    const data = JSON.parse(res);
    const conv_type = data?.entity?.chatType === 1 ? 'C2C' : 'GROUP';
    TUIConversationService.switchConversation(`${conv_type}${data.entity.sender}`);
    navigation.navigate('Chat');
    } catch (error) {
    console.log('error', error);
    }
    });
    // 监听在线推送
    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:配置厂商推送

    Android
    iOS
    1. 请您完成控制台厂商推送信息填写后,从控制台下载 timpush-configs.json 文件,并添加到项目的 MyReactNativeApp/android/app/src/main/assets 目录下,如果该目录不存在,请手动创建。如图所示:
    
    
    
    2. 华为、荣耀、vivo、FCM。
    FCM
    华为
    荣耀
    vivo
    您需要支持 FCM 推送时,须配置 google-services.json 文件到 MyReactNativeApp/android/app 目录下(请注意!不是 MyReactNativeApp/android/app/src/main/assets 目录)。如图所示:
    
    您需要支持华为推送时,须配置 agconnect-services.json 文件到 MyReactNativeApp/android/app/src/main/assets/ 目录下。如图所示:
    
    您需要支持荣耀推送时,须配置 appIDMyReactNativeApp/android/app/build.gradle文件中。如图所示:
    ......
    android {
    ......
    defaultConfig {
    ......
    manifestPlaceholders = [
    "HONOR_APPID" : ""
    ]
    }
    }
    获取荣耀的 appID
    配置荣耀的 appID
    
    
    
    
    
    
    
    您需要支持 vivo 推送时,须配置 appIDappKeyMyReactNativeApp/android/app/build.gradle文件中。如图所示:
    ......
    android {
    ......
    defaultConfig {
    ......
    manifestPlaceholders = [
    "VIVO_APPKEY" : "0",
    "VIVO_APPID" : "0",
    ]
    }
    }
    获取 vivo 的 appID && appKey
    配置 vivo 的 appID && appKey
    
    
    
    
    
    
    1. 请将您在厂商配置步骤中, 获取到的 iOS APNs 推送证书,上传至 IM 控制台。IM 控制台会为您分配一个证书 ID,如图所示:
    
    
    
    2. MyReactNativeApp/ios/MyReactNativeApp 目录下,新建 Resources文件夹,并新建 timpush-configs.json 文件。编辑 timpush-configs.json,填入控制台获取的证书 ID,如下所示:
    {
    "businessID": "您的证书ID"
    }
    
    3. XCode 打开 MyReactNativeApp 项目,右键单击项目 > Add Files to "MyReactNativeApp",将 timpush-configs.json 目录添加到工程。如图所示:
    

    步骤5:配置 Native Modules 和相关依赖

    Android
    iOS
    说明:
    请确保 timpush-configs.json 文件内的包名和 MyReactNativeApp/android/app/build.gradle 文件内的 applicationId 值一致,不一致则会导致离线推送不可用。
    1. 使用 Android Studio 打开 MyReactNativeApp/android 目录。
    2. 修改项目入口文件。
    项目入口文件为:MainApplication.kt
    项目入口文件为:MainApplication.java
    ...
    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())
    }
    }
    ...
    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;
    }
    ...
    3. 编辑 android/build.gradle 文件,更新 repositoriesdependenciesallprojects
    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 {
    ...
    // 如果您创建的项目 com.android.tools.build:gradle 未带版本号,请设置为 8.5.0
    // classpath("com.android.tools.build:gradle:8.5.0")
    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' }
    }
    }
    ...
    4. 编辑 android/app/build.gradle 文件,更新 plugindefaultConfig
    ...
    // 如果您的 APP 需要 FCM 推送,请取消下面的注释
    // 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" : ""
    ]
    }
    }
    5. 以上操作都完成后,选择 File > Sync Project with Gradle Files
    1. 使用 XCode 打开 MyReactNativeApp/ios/MyReactNativeApp.xcworkspace
    2. 进入 MyReactNativeApp/ios 目录,安装 TIMPush。
    pod install
    # 如果无法安装最新版本,执行以下命令更新本地的 CocoaPods 仓库列表
    pod repo update
    3. 在 App 中启用推送通知功能。打开 Xcode 项目,在 Project > Target > Capabilities 页面选择并添加 Push Notifications
    
    

    步骤6:在真机上运行(测试前请务必打开手机通知权限,允许应用通知。)

    从项目根目录开始,在命令提示符中运行以下命令,在设备上安装并启动您的应用程序:
    Android
    iOS
    npm run android
    npm run ios

    步骤7:消息推送触达统计

    如果您需要统计触达数据,请按照如下完成配置:
    华为
    荣耀
    vivo
    魅族
    iOS
    
    回执地址:
    Singapore : https://apisgp.im.qcloud.com/v3/offline_push_report/huawei
    Korea: https://apikr.im.qcloud.com/v3/offline_push_report/huawei
    USA: https://apiusa.im.qcloud.com/v3/offline_push_report/huawei
    Germany: https://apiger.im.qcloud.com/v3/offline_push_report/huawei
    Indonesia: https://apiidn.im.qcloud.com/v3/offline_push_report/huawei
    China: https://api.im.qcloud.com/v3/offline_push_report/huawei
    说明:
    华为推送证书 ID <= 11344 ,使用华为推送 v2 版本接口,不支持触达和点击回执,请重新生成更新证书 ID。
    
    回执地址:
    Singapore : https://apisgp.im.qcloud.com/v3/offline_push_report/honor
    Korea: https://apikr.im.qcloud.com/v3/offline_push_report/honor
    USA: https://apiusa.im.qcloud.com/v3/offline_push_report/honor
    Germany: https://apiger.im.qcloud.com/v3/offline_push_report/honor
    Indonesia: https://apiidn.im.qcloud.com/v3/offline_push_report/honor
    China: https://api.im.qcloud.com/v3/offline_push_report/honor
    回调地址配置
    回执 ID 配置 IM 控制台
    
    
    
    回执地址:
    Singapore :https://apisgp.im.qcloud.com/v3/offline_push_report/vivo
    Korea:https://apikr.im.qcloud.com/v3/offline_push_report/vivo
    USA: https://apiusa.im.qcloud.com/v3/offline_push_report/vivo
    Germany: https://apiger.im.qcloud.com/v3/offline_push_report/vivo
    Indonesia: https://apiidn.im.qcloud.com/v3/offline_push_report/vivo
    China: https://api.im.qcloud.com/v3/offline_push_report/vivo
    
    
    
    打开回执开关
    配置回执地址
    
    
    
    
    
    
    回执地址:
    Singapore : https://apisgp.im.qcloud.com/v3/offline_push_report/meizu
    Korea: https://apikr.im.qcloud.com/v3/offline_push_report/meizu
    USA: https://apiusa.im.qcloud.com/v3/offline_push_report/meizu
    Germany: https://apiger.im.qcloud.com/v3/offline_push_report/meizu
    Indonesia: https://apiidn.im.qcloud.com/v3/offline_push_report/meizu
    China: https://api.im.qcloud.com/v3/offline_push_report/meizu
    说明:
    打开回执开关后,请务必确保回执地址正确配置。不配置或者配置地址错误,都会影响推送功能。
    iOS 端推送触达统计配置,详细请参见 统计推送抵达率
    其余支持厂商不需要配置,FCM 暂不支持推送统计功能。
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持