Skip to content
BranchesTags

Repository files navigation

相关资源

准备工作

  1. 您需要一个纯 React Native 项目或 React Native 原生混合项目，这个应用可以是您现有的工程，也可以是您新建的一个空的工程。
  2. React Native 版本要求：0.69.1 及以上
  3. 如需支持 HarmonyOS NEXT（鸿蒙），环境要求与集成方式见文末鸿蒙章节。

第一步：SDK 介绍

react-native-cos-sdk 目前兼容支持 iOS、Android、HarmonyOS NEXT，是通过 React Native 桥接原生 Android、iOS 和 HarmonyOS 的 COS SDK 实现。

第二步：集成 SDK

  1. 运行此命令：

使用npm:

npm install --save react-native-cos-sdk

或者使用yarn:

yarn add react-native-cos-sdk
  1. 在您的代码中，您可以使用 import 进行导入，然后开始使用：
import Cos from 'react-native-cos-sdk';

关闭腾讯灯塔上报功能

为了持续跟踪和优化 SDK 的质量，给您带来更好的使用体验，我们在 SDK 中引入了 腾讯灯塔 SDK，腾讯灯塔只对 COS 侧的请求性能进行监控，不会上报业务侧数据。 若是想关闭该功能，可以在依赖引入和 import 时将 react-native-cos-sdk 替换为 react-native-cos-sdk-nobeacon 即可。

HarmonyOS NEXT 平台的 COS SDK 未接入腾讯灯塔，无需该操作；setCloseBeacon 在该平台为空实现。

第三步：开始使用

!

  • 建议用户 使用临时密钥 调用 SDK，通过临时授权的方式进一步提高 SDK 使用的安全性。申请临时密钥时，请遵循 最小权限指引原则，防止泄漏目标存储桶或对象之外的资源。
  • 如果您一定要使用永久密钥，建议遵循 最小权限指引原则 对永久密钥的权限范围进行限制。

1. 初始化密钥

实现获取临时密钥

调用 Cos 的 initWithSessionCredentialCallback 方法，实现请求临时密钥并返回结果的过程。

import Cos from 'react-native-cos-sdk';

Cos.initWithSessionCredentialCallback(async () => {
  // 首先从您的临时密钥服务器获取包含了密钥信息的响应，例如：
  // 临时密钥服务器 url，临时密钥生成服务请参考 https://cloud.tencent.com/document/product/436/14048
  let stsUrl = "http://stsservice.com/sts";
  let response = null;
  try{
    response = await fetch(stsUrl);
  } catch(e){
    console.error(e);
    return null;
  }
  // 然后解析响应，获取临时密钥信息
  const responseJson = await response.json();
  const credentials = responseJson.credentials;
  const startTime = responseJson.startTime;
  const expiredTime = responseJson.expiredTime;
  const sessionCredentials = {
    tmpSecretId: credentials.tmpSecretId,
    tmpSecretKey: credentials.tmpSecretKey,
    startTime: startTime,
    expiredTime: expiredTime,
    sessionToken: credentials.sessionToken
  };
  console.log(sessionCredentials);
  // 最后返回临时密钥信息对象
  return sessionCredentials;
})

实现获取限制范围的临时密钥

该方式可以更精细的控制临时密钥的使用范围，STSCredentialScope 中包含了本次请求的action(操作)、region(地域)、bucket(桶名)、prefix(资源路径)， 使用 STSCredentialScope 可以生成一个限定范围的临时密钥，例如根据 prefix 生成固定路径文件名的上传临时密钥，实现每个上传文件都有单独的临时密钥。

调用 Cos 的 initWithScopeLimitCredentialCallback 方法，实现请求临时密钥并返回结果的过程。

import Cos from 'react-native-cos-sdk';

// 使用范围限制的临时密钥初始化
Cos.initWithScopeLimitCredentialCallback(async (stsScopesArray:Array<STSCredentialScope>) => {
  // 首先从您的临时密钥服务器获取包含了密钥信息的响应，例如：
  // 临时密钥服务器 url，临时密钥生成服务请参考 https://cloud.tencent.com/document/product/436/14048
  // 范围限制的临时密钥服务请参考：https://cloud.tencent.com/document/product/436/31923
  let stsUrl = "http://stsservice.com/sts/scope";
  console.log(JSON.stringify(stsScopesArray));
  let response = null;
  try{
    response = await fetch(stsUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      // 将范围实体列表转换为post body中的json
      body: JSON.stringify(stsScopesArray),
    });
  } catch(e){
    console.error(e);
    return null;
  }
  // 然后解析响应，获取临时密钥信息
  const responseJson = await response.json();
  const credentials = responseJson.credentials;
  const startTime = responseJson.startTime;
  const expiredTime = responseJson.expiredTime;
  const sessionCredentials = {
    tmpSecretId: credentials.tmpSecretId,
    tmpSecretKey: credentials.tmpSecretKey,
    startTime: startTime,
    expiredTime: expiredTime,
    sessionToken: credentials.sessionToken
  };
  console.log(sessionCredentials);
  // 最后返回临时密钥信息对象
  return sessionCredentials;
})

强制使本地保存的临时密钥失效

该功能可以强制使 COS SDK 已经缓存的临时密钥失效，包括无限制使用范围和限制使用范围的临时密钥，失效后再使用 COS 接口功能时 SDK 会重新向业务临时密钥服务端获取新的临时密钥。 调用方法：

await Cos.forceInvalidationCredential();

使用永久密钥进行本地调试

您可以使用腾讯云的永久密钥来进行开发阶段的本地调试。由于该方式存在泄漏密钥的风险，请务必在上线前替换为临时密钥的方式。

import Cos from 'react-native-cos-sdk';

let SECRET_ID = "SECRETID"; //永久密钥 secretId
let SECRET_KEY = "SECRETKEY"; //永久密钥 secretKey

Cos.initWithPlainSecret(
  SECRET_ID,
  SECRET_KEY
)

2. 注册 COS 服务

// 存储桶所在地域简称，例如广州地区是 ap-guangzhou
let region = "COS_REGION";
// 创建 CosXmlServiceConfig 对象，根据需要修改默认的配置参数
let serviceConfig = {
    region: region,
    isDebuggable: true,
    isHttps: true,
};
// 注册默认 COS Service
let cosService = await Cos.registerDefaultService(serviceConfig);
// 获取默认 COS Service
let cosService1 = Cos.getDefaultService();

// 创建 TransferConfig 对象，根据需要修改默认的配置参数
// TransferConfig 可以设置智能分块阈值 默认对大于或等于2M的文件自动进行分块上传，可以通过如下代码修改分块阈值
let transferConfig = {
    forceSimpleUpload: false,
    enableVerification: true,
    divisionForUpload: 2097152, // 设置大于等于 2M 的文件进行分块上传
    sliceSizeForUpload: 1048576, //设置默认分块大小为 1M
};
// 注册默认 COS TransferManger
let cosTransferManger = await Cos.registerDefaultTransferManger(serviceConfig, transferConfig);
// 获取默认 COS TransferManger
let cosTransferManger1 = Cos.getDefaultTransferManger();

// 也可以通过 registerService 和 registerTransferManger 注册其他实例， 用于后续调用
// 一般用 region 作为注册的key
let newRegion = "NEW_COS_REGION";
serviceConfig.region = newRegion;
let cosServiceNew = await Cos.registerService(newRegion, serviceConfig);
let cosTransferMangerNew = await Cos.registerTransferManger(newRegion, serviceConfig, transferConfig);
// 通过 key 获取 COS Service 和 COS TransferManger
let cosServiceNew1 = Cos.getService(newRegion);
let cosTransferMangerNew1 = Cos.getTransferManger(newRegion);

注意：获取 COS Service 和 COS TransferManger 之前必须先要进行注册，否则会报错。 例如可以通过封装类似下面的方法控制获取前必须注册的流程

const SERVICE_CONFIG = {
    region: "COS_REGION",
    isDebuggable: true,
}

export async function getDefaultService(): Promise<CosService> {
  if(Cos.hasDefaultService()){
      return Cos.getDefaultService()
  } else {
      //注册默认service
      return await Cos.registerDefaultService(SERVICE_CONFIG)
  }
}

参数说明

CosXmlServiceConfig 用于配置 COS 服务，其主要成员说明如下：

参数名称 描述 类型 默认值 支持平台
region 存储桶地域 地域和访问域名 String null Android和iOS
connectionTimeout 连接超时时间（单位是毫秒） Int Android(15000) iOS(30000) Android和iOS
socketTimeout 读写超时时间（单位是毫秒） Int 30000 Android
isHttps 是否使用https协议 Bool true Android和iOS
host 设置除了 GetService 请求外的 host String null Android和iOS
hostFormat 设置 host 的格式化字符串，sdk 会将 ${bucket} 替换为真正的 bucket，${region} 替换为真正的 region
例如将 hostFormat 设置为 ${bucket}.${region}.tencent.com，并且您的存储桶和地域分别为 bucket-1250000000 和 ap-shanghai，那么最终的请求地址为 bucket-1250000000.ap-shanghai.tencent.com
  • 注意，这个设置不会影响 GetService 请求
    		•  String null Android
    port 设置请求的端口 Int null Android
    isDebuggable 是否是 debug 模式（debug 模式会打印 debug 日志） Bool false Android
    signInUrl 是否将签名放在 URL 中，默认放在 Header 中 Bool false Android
    userAgent ua 拓展参数 String null Android和iOS
    dnsCache 是否开启 DNS 解析缓存，开启后，将 DNS 解析的结果缓存在本地，当系统 DNS 解析失败后，会使用本地缓存的 DNS 结果 Bool true Android
    accelerate 是否使用全球加速域名 Bool false Android和iOS

    TransferConfig 用于配置 COS 上传服务，其主要成员说明如下：

    参数名称 描述 类型 默认值 支持平台
    divisionForUpload 设置启用分块上传的最小对象大小 Int 2097152 Android和iOS
    sliceSizeForUpload 设置分块上传时的分块大小 Int 1048576 Android和iOS
    enableVerification 分片上传时是否整体校验 Bool true Android和iOS
    forceSimpleUpload 是否强制使用简单上传 Bool false Android

    第四步：访问 COS 服务

    上传对象

        // 获取 CosTransferManger
    let cosTransferManger: CosTransferManger = Cos.getDefaultTransferManger();
    //let cosTransferManger: CosTransferManger = Cos.getTransferManger(newRegion);
    // 存储桶名称，由 bucketname-appid 组成，appid 必须填入，可以在 COS 控制台查看存储桶名称。 https://console.cloud.tencent.com/cos5/bucket
    let bucket = "examplebucket-1250000000";
    let cosPath = "exampleobject"; //对象在存储桶中的位置标识符，即称对象键
    let srcPath = "本地文件的路径"; //本地文件的路径
    //若存在初始化分块上传的 UploadId，则赋值对应的 uploadId 值用于续传；否则，赋值 undefined
    let _uploadId = undefined;

    // 上传成功回调
    let successCallBack = (header?: object) => {
      // todo 上传成功后的逻辑
    };
    //上传失败回调
    let failCallBack = (clientError?: CosXmlClientError, serviceError?: CosXmlServiceError) => {
      // todo 上传失败后的逻辑
      if (clientError) {
        console.log(clientError);
      }
      if (serviceError) {
        console.log(serviceError);
      }
    };
    //上传状态回调, 可以查看任务过程
    let stateCallBack = (state: TransferState) => {
      // todo notify transfer state
    };
    //上传进度回调
    let progressCallBack = (complete: number, target: number) => {
      // todo Do something to update progress...
    };
    //初始化分块完成回调
    let initMultipleUploadCallBack = (bucket: string, cosKey: string, uploadId: string) => {
      //用于下次续传上传的 uploadId
      _uploadId = uploadId;
    };
    
    //开始上传
    let transferTask:TransferTask = await cosTransferManger.upload(
      bucket,
      cosPath,
      srcPath,
      {
        uploadId: _uploadId,
        resultListener: {
          successCallBack: successCallBack,
          failCallBack: failCallBack
        },
        stateCallback: stateCallBack,
        progressCallback: progressCallBack,
        initMultipleUploadCallback: initMultipleUploadCallBack,
      }
    );
    //暂停任务
    transferTask.pause();
    //恢复任务
    transferTask.resume();
    //取消任务
    transferTask.cancel();

    下载对象

        // 高级下载接口支持断点续传，所以会在下载前先发起 HEAD 请求获取文件信息。
    // 如果您使用的是临时密钥或者使用子账号访问，请确保权限列表中包含 HeadObject 的权限。

    // CosTransferManger 支持断点下载，您只需要保证 bucket、cosPath、savePath
    // 参数一致，SDK 便会从上次已经下载的位置继续下载。

    // 获取 CosTransferManger
    let cosTransferManger: CosTransferManger = Cos.getDefaultTransferManger();
    //let cosTransferManger: CosTransferManger = Cos.getTransferManger(newRegion);
    // 存储桶名称，由 bucketname-appid 组成，appid 必须填入，可以在 COS 控制台查看存储桶名称。 https://console.cloud.tencent.com/cos5/bucket
    let bucket = "examplebucket-1250000000";
    let cosPath = "exampleobject"; //对象在存储桶中的位置标识符，即称对象键
    let downliadPath = "本地文件的路径"; //保存到本地文件的路径

    // 下载成功回调
    let successCallBack = (header?: object) => {
      // todo 下载成功后的逻辑
    };
    //下载失败回调
    let failCallBack = (clientError?: CosXmlClientError, serviceError?: CosXmlServiceError) => {
      // todo 下载失败后的逻辑
      if (clientError) {
        console.log(clientError);
      }
      if (serviceError) {
        console.log(serviceError);
      }
    };
    //下载状态回调, 可以查看任务过程
    let stateCallBack = (state: TransferState) => {
      // todo notify transfer state
    };
    //下载进度回调
    let progressCallBack = (complete: number, target: number) => {
      // todo Do something to download progress...
    };

    //开始下载
    let transferTask:TransferTask = = await cosTransferManger.download(
      bucket,
      cosPath,
      downliadPath,
      {
        resultListener: {
          successCallBack: successCallBack,
          failCallBack: failCallBack
        },
        stateCallback: stateCallBack,
        progressCallback: progressCallBack
      }
    );
    //暂停任务
    transferTask.pause();
    //恢复任务
    transferTask.resume();
    //取消任务
    transferTask.cancel();

    HarmonyOS NEXT（鸿蒙）集成与平台差异

    鸿蒙支持自 1.3.0 起提供，环境要求：RNOH 基座 0.72 / 0.77 / 0.82 / 0.84 版本线之一（无 0.76 线）、DevEco Studio 5.0+、鸿蒙 SDK API 12+。JS 侧用法与 Android/iOS 完全一致，桥接实现随 npm 包发布在 harmony/cos_react_native 目录，需在宿主鸿蒙工程中手动接入：

    1. 添加依赖（entry/oh-package.json5）：

    {
  "dependencies": {
    "@rnoh/react-native-openharmony": "0.72.143",  // 版本由宿主 RNOH 基座决定，SDK 不锁定
    "cos_react_native": "file:../../node_modules/react-native-cos-sdk/harmony/cos_react_native"
  }
}

    file: 源码方式已实测会遇到两类编译问题： ① ohpm 把 file: 依赖装成符号链接，es2abc 可能报 Field {...Logger.moduleRecordIdx} has different value 模块合并冲突——需把符号链接解引用为真实目录（cp -RL）； ② 传递依赖 @tencentcloud/foundation（@tencentcloud/cos 内嵌的 file: har）不会自动链入模块 oh_modules，报 Cannot find module '@tencentcloud/foundation'——需从工程 oh_modules/.ohpm/ 仓库中把它复制/链接到 cos_react_native/oh_modules/@tencentcloud/ 下。 更稳妥的方式：先对 harmony/cos_react_native 执行 hvigorw assembleHar 产出 har，再以 file:./libs/cos_react_native.har 引用（本仓库各 example 即此方式，无上述问题）。

    2. 注册 Package 与 C++ 方法表（RNOH 的 TurboModule 需要 ArkTS 与 C++ 双侧注册）：

    // entry/src/main/ets/RNPackagesFactory.ets
import { CosPackage } from 'cos_react_native';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [new CosPackage(ctx)];
}
    # entry/src/main/cpp/CMakeLists.txt
add_subdirectory("${OH_MODULE_DIR}/cos_react_native/src/main/cpp" ./cos_react_native)
    // entry/src/main/cpp/PackageProvider.cpp
#include "CosPackage.h"
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return { std::make_shared<CosPackage>(ctx) };
}

    3. 声明网络权限：鸿蒙的 HAR 不能声明权限，必须在 entry 模块 src/main/module.json5 的 requestPermissions 中加 ohos.permission.INTERNET，否则所有网络请求失败。

    平台差异（均已实测确认；降级方法调用不报错，首次调用打一条 warn 日志）：

    能力 鸿蒙状态 说明
    日志与 CLS 共 20 项（enableLogcat/enableLogFile/addLogListener/removeLogListener/setMinLevel/setLogcatMinLevel/setFileMinLevel/setClsMinLevel/setDeviceID/setDeviceModel/setAppVersion/setExtras/setLogFileEncryptionKey/getLogRootDir/setCLsChannel*/addSensitiveRule/removeSensitiveRule） ❌ 空实现 鸿蒙 COS SDK 无独立日志子系统；排查问题请在注册 service 时传 isDebuggable: true 走 hilog
    setCloseBeacon ⭕ 空实现 鸿蒙 COS SDK 未接入腾讯灯塔，本就无需关闭
    initCustomerDNSFetch / setDNSFetchIps ❌ 不支持 rcp 只接受静态 DNS 规则，请改用 initCustomerDNS（静态映射，需在 register 之前调用）
    initWithScopeLimitCredentialCallback（scope 限权） ⚠️ 限单 bucket 该模式整体已废弃；鸿蒙 SDK 的进程级全局缓存会让多 bucket 场景复用首个 bucket 的 scope 凭证导致 403。请用 initWithSessionCredentialCallback
    signInUrl / dnsCache / domainSwitch、TransferConfig.forceSimpleUpload / enableVerification ❌ 不生效 鸿蒙 SDK 无对应能力，传入会告警；强制简单上传可把 divisionForUpload 设为大于文件大小
    临时密钥回调 ⚠️ 15s 超时 回调 15 秒未回填，该次请求以 INVALID_CREDENTIALS（10001）快速失败；回填缺少 expiredTime 时凭证永不刷新
    cancelAll ⚠️ 进程级 鸿蒙 SDK 会取消当前进程内所有 COS 请求（Android/iOS 为实例级），精细控制请用任务级 cancel()
    preBuildConnection ⚠️ 实现不同 Android 为预连接；鸿蒙为一次 headBucket 预热请求；iOS 为空实现
    响应头 key 大小写 ⚠️ 鸿蒙/iOS 统一小写，Android 保留原样；建议按小写读取
    getBucketVersioning / getBucketAccelerate ⚠️ 三端均返回 boolean，Suspended 与「从未开启」无法区分
    已结束任务调用 pause ⚠️ Android/鸿蒙 reject，iOS resolve
    传输 pause/resume ⚠️ iOS 仅在拿到断点数据时回调 PAUSED；简单上传 resume 三端均为「重新开始」；RESUMED_WAITING 仅 Android/iOS 有
    doesBucketExist / doesObjectExist 三端一致 仅 404 返回 false，网络/权限等错误如实抛出
    三方库/导航 ⚠️ react-native-screens 适配包在部分 RNOH 版本线有渲染缺陷（页面空白）；本仓库 example 用自研极简导航规避。另 RNOH 的 Hermes 无 ICU，toLocaleString() 不可用

    About

    对象存储COS React Native语言SDK（桥接plugin实现）

    Resources

    Readme
    MIT license

    Code of conduct

    Code of conduct

    Contributing

    Contributing
    Activity
    Custom properties

    Stars

    7 stars

    Watchers

    1 watching

    Forks

    6 forks
    Report repository

    Releases

    Packages

    Used by

    Contributors

    Languages