快速入门

最近更新时间:2025-06-20 14:07:42

我的收藏

相关资源

准备工作

您需要一个纯 React Native 项目或 React Native 原生混合项目,这个应用可以是您现有的工程,也可以是您新建的一个空的工程。详情请参见 React Native 应用开发指引
React Native 版本要求:0.69.7 及以上。

SDK 介绍

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

步骤一:集成 SDK

1. 运行以下命令:
使用 npm:
npm install --save react-native-cos-sdk
或者使用 yarn:
yarn add react-native-cos-sdk
2. 在您的代码中,您可以使用 import 进行导入,然后开始使用:
import Cos from 'react-native-cos-sdk';
说明:
为了持续跟踪和优化 SDK 的质量,给您带来更好的使用体验,我们在 SDK 中引入了 腾讯灯塔 SDK,腾讯灯塔只对 COS 侧的请求性能进行监控,不会上报业务侧数据。
若是想关闭该功能,可以在依赖引入import 时将 react-native-cos-sdk 替换为 react-native-cos-sdk-nobeacon 即可。

步骤二:开始使用

注意:
建议用户 使用临时密钥 调用 SDK,通过临时授权的方式进一步提高 SDK 使用的安全性。申请临时密钥时,请遵循 最小权限指引原则,防止泄露目标存储桶或对象之外的资源。
如果您一定要使用永久密钥,建议遵循 最小权限指引原则 对永久密钥的权限范围进行限制。
为了您的业务安全,上传文件可参见 上传安全限制

1. 初始化密钥

单次临时密钥
临时密钥回调
固定密钥(仅测试)
将单个密钥设置给具体 COS 操作方法的 sessionCredentials 参数(例如上传方法 upload 等),该密钥仅用于本次 COS 操作(例如上传等)。
// 获取临时密钥(业务层控制获取的方式)
let tmpSecretId = "SECRETID"; // 临时密钥 SecretId
let tmpSecretKey = "SECRETKEY"; // 临时密钥 SecretKey
let sessionToken = "SESSIONTOKEN"; // 临时密钥 Token
let expiredTime = 1556183496;//临时密钥有效截止时间戳,单位是秒
// 建议返回服务器时间作为签名的开始时间,避免由于用户手机本地时间偏差过大导致请求过期
let startTime = 1556182000; //临时密钥有效起始时间,单位是秒
const sessionCredentials = {
tmpSecretId: tmpSecretId,
tmpSecretKey: tmpSecretKey,
startTime: startTime,
expiredTime: expiredTime,
sessionToken: sessionToken
};
// 后续将 sessionQCloudCredentials 传入具体的 COS 操作方法
注意:
COS SDK 版本需要大于等于 v1.1.9。
采用回调的方式给 COS SDK 提供获取临时密钥的方法,SDK 会在首次和缓存的临时密钥快过期时使用该回调重新获取临时密钥。
调用 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,// startTime 为十位时间戳。
expiredTime: expiredTime, // expiredTime 为十位时间戳。
sessionToken: credentials.sessionToken
};
console.log(sessionCredentials);
// 最后返回临时密钥信息对象
return sessionCredentials;
})
您可以使用腾讯云的永久密钥来进行开发阶段的本地调试。由于该方式存在泄露密钥的风险,请务必在上线前替换为临时密钥的方式。
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

3.访问 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();