对象存储 快速入门（React Native SDK）

一、相关资源

·SDK 源码下载请参见 React Native 源码下载。

·示例 Demo 请参见 React Native SDK Demo。

·SDK 更新日志请参见 CHANGELOG。

·npm 地址请参见 npm 地址。

二、环境配置与准备

·你需要一个纯 React Native 项目或 React Native 原生混合项目，这个应用可以是你现有的工程，也可以是你新建的一个空的工程。详情请参见 React Native 应用开发指引。

·React Native 版本要求：0.69.7及以上。

注意：说明：

三、安装 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';

注意：说明：

四、设置 API 访问密钥

单次临时密钥临时密钥回调固定密钥（仅测试）将单个密钥设置给具体 COS 操作方法的 sessionCredentials 参数（例如上传方法 upload 等），该密钥仅用于本次 COS 操作（例如上传等）。// 获取临时密钥（业务层控制获取的方式）let tmpSecretId = "SECRETID"; // 临时密钥 SecretIdlet tmpSecretKey = "SECRETKEY"; // 临时密钥 SecretKeylet sessionToken = "SESSIONTOKEN"; // 临时密钥 Tokenlet expiredTime = 1556183496;//临时密钥有效截止时间戳，单位是秒// 建议返回服务器时间作为签名的开始时间，避免由于用户手机本地时间偏差过大导致请求过期let startTime = 1556182000; //临时密钥有效起始时间，单位是秒const sessionCredentials = { tmpSecretId: tmpSecretId, tmpSecretKey: tmpSecretKey, startTime: startTime, expiredTime: expiredTime, sessionToken: sessionToken};// 后续将 sessionCredentials 传入具体的 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"; //永久密钥 secretIdlet SECRET_KEY = "SECRETKEY"; //永久密钥 secretKeyCos.initWithPlainSecret( SECRET_ID, SECRET_KEY)

五、注册 COS 服务

// 存储桶所在地域简称，例如广州地区是 ap-guangzhoulet region = "COS_REGION";// 创建 CosXmlServiceConfig 对象，根据需要修改默认的配置参数let serviceConfig = { region: region, isDebuggable: true, isHttps: true,};// 注册默认 COS Servicelet cosService = await Cos.registerDefaultService(serviceConfig);// 获取默认 COS Servicelet cosService1 = Cos.getDefaultService();// 创建 TransferConfig 对象，根据需要修改默认的配置参数// TransferConfig 可以设置智能分块阈值 默认对大于或等于2M的文件自动进行分块上传，可以通过如下代码修改分块阈值let transferConfig = { forceSimpleUpload: false, enableVerification: true, divisionForUpload: 2097152, // 设置大于等于 2M 的文件进行分块上传 sliceSizeForUpload: 1048576, //设置默认分块大小为 1M};// 注册默认 COS TransferMangerlet cosTransferManger = await Cos.registerDefaultTransferManger(serviceConfig, transferConfig);// 获取默认 COS TransferMangerlet cosTransferManger1 = Cos.getDefaultTransferManger();// 也可以通过 registerService 和 registerTransferManger 注册其他实例， 用于后续调用// 一般用 region 作为注册的 keylet 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 TransferMangerlet 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 服务，其主要成员说明如下：

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

七、访问 COS 服务

上传对象下载对象说明：更多完整示例，请前往 GitHub 查看。 // 获取 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, // 此处配置单次临时密钥，如果不是单次临时密钥的方式不传该参数 sessionCredentials: sessionCredentials } ); //暂停任务 //transferTask.pause(); //恢复任务 //transferTask.resume(); //取消任务 //transferTask.cancel();说明：更多完整示例，请前往 GitHub 查看。 // 高级下载接口支持断点续传，所以会在下载前先发起 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 downLoadPath = "本地文件的路径"; //保存到本地文件的路径 // 下载成功回调 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, downLoadPath, { resultListener: { successCallBack: successCallBack, failCallBack: failCallBack }, stateCallback: stateCallBack, progressCallback: progressCallBack, // 此处配置单次临时密钥，如果不是单次临时密钥的方式不传该参数 sessionCredentials: sessionCredentials } ); //暂停任务 //transferTask.pause(); //恢复任务 //transferTask.resume(); //取消任务 //transferTask.cancel();

八、常见问题

你在使用过程中可能会碰到的一些常见问题，相关的解决办法可参见 React Native SDK 常见问题。