Aliyun-oss-rn NPM

Aliyun OSS SDK for React Native

README of English

简介

这是一个阿里云官方库 aliyun-oss-react-native 的问题修复版本，鉴于原仓库阿里云团队不再维护，此仓库以 aliyun-oss-rn 发布。用法与原仓库一致。

本文档主要介绍OSS React Native SDK的安装和使用。本文档假设您已经开通了阿里云OSS 服务，并创建了Access Key ID 和Access Key Secret。文中的ID 指的是Access Key ID，KEY 指的是Access Key Secret。如果您还没有开通或者还不了解OSS，请登录OSS产品主页获取更多的帮助。

开发语言

JavaScript 、JAVA、Objective-C

环境要求

Android系统版本: 2.3及以上
IOS系统版本: 8.0及以上
必须注册有Aliyun.com用户账户,并开通OSS服务。
Node版本: 8.0及以上
React Native版本：0.44.0及以上

内容

安装

注意: react-native版本建议0.44.0及以上，建议使用fackebook官方react-native-cli或者create-react-native-app脚手架进行react native项目构建。aliyun-oss-react-native可通过npm或者yarn安装

npm install aliyun-oss-rn  --save

yarn

yarn install aliyun-oss-rn --save

自动安装

react native项目下运行react-native link命令

react-native link aliyun-oss-rn

注意：由于 React Native 脚手架不同版本的问题，有时候自动安装可能会失败，可手动添加android和iOS的的依赖库。同样为了兼容IPv6-Only网络，iOS工程中需参考 aliyun-oss-ios-sdk 说明中引入以下包。

1. libresolv.tbd
2. CoreTelephony.framework
3. SystemConfiguration.framework

手动安装

iOS

CocoaPods

pod 'aliyun-oss-react-native', :path => '../node_modules/aliyun-oss-rn'

非CocoaPods

在XCode Project navigator面板中, 右键单击工程Libraries文件 ➜ 选择Add Files to <...> 进入 node_modules ➜ aliyun-oss-rn ➜ ios ➜ select RNAliyunOSS.xcodeproj
在XCode Project navigator面板中, 添加libRNAliyunOSS.a to Build Phases -> Link Binary With Libraries
在XCode Project navigator面板中，右键单击framework ➜ Add Files to your project's name. 进入node_modules ➜ aliyun-oss-rn-sdk ➜ AliyunSDK. Add AliyunOSSiOS.framework
在XCode Project navigator面板中，选择项目，在 Build Settings 中搜索 Framework Search Paths，双击右侧的列表，添加路径 $(SRCROOT)/../node_modules/aliyun-oss-react-native/ios/AliyunSDK

Android

settings.gradle

include ':aliyun-oss-react-native'
project(':aliyun-oss-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aliyun-oss-rn/android')

build.gradle

dependencies {
    implementation project(':aliyun-oss-react-native')
}

MainApplication.java

import com.reactlibrary.RNAliyunOssPackage;

public class MainApplication extends Application implements ReactApplication {
 @Override
   protected List<ReactPackage> getPackages() {
     return Arrays.<ReactPackage>asList(
         new MainReactPackage(),
           new ImagePickerPackage(),
           new RNAliyunOssPackage()
     );
   }
}

使用

目前接口除了初始化客户端和开启日志功能接口外，其他的接口都返回Promise对象，开发者可以使用async await的语法，也可使用原生的 promise().then(/**/).catch(/**/),接口的使用基本一样，以上传接口为例进行说明

step-1:导入AliyunOSS

import AliyunOSS from 'aliyun-oss-rn'

step-2:开启调试模式 (可选)

AliyunOSS.enableDevMode();

step-3:初始化配置选项（可选）

const configuration = {
   maxRetryCount: 3,
   timeoutIntervalForRequest: 30,
   timeoutIntervalForResource: 24 * 60 * 60
};

step-4:初始化OSS Client，目前提供了4中初始化OSS Client方式，这里调用initWithServerSTS，其他的几个接口可参考该文档中的API

const endpoint = "xxxx.aliyuncs.com"

AliyunOSS.initWithServerSTS("/***http://ip:端口/****/",endPoint, configuration)

备注：仓库文件中提供Node脚步启用本地鉴权服务，打开script文件夹运行，运行以下命令：

npm istall
修改config中accessKeyId 和 accessKeySecret
node index.js,端口默认9000，鉴权服务地址为:(http|https)://ip:9000/

step-5:

  // 监听上传事件和上传进度
  const uploadProgress = p => console.log(p.currentSize / p.totalSize);
  AliyunOSS.addEventListener('uploadProgress', uploadProgress);
  // 备注：目前接口仅暴漏filePath,上传路径为file:///
  AliyunOSS.asyncUpload(bucketname, objectkey, filePath).then( (res) => {
    // log的查看可以通过React Native自带的调试工具也可通过XCode Log控制台进行查看（这种说明是不是不好意思列出来打印内容？）
    console.log(res)
    /*
    // 你没看错，就是个字符串，我看到这么扯淡的返回数据就知道肯定是阿里官方的没错了！
    res: - iOS
    <OSSTask: 0x28005f000; completed = YES; cancelled = NO; faulted = NO; result = OSSResult<0x28006da80> : {httpResponseCode: 200, requestId: 5D68BA341FC81051D38D1EEA, httpResponseHeaderFields: {
    Connection = "keep-alive";
    "Content-Length" = 0;
    "Content-MD5" = "hv5uuYgemLMbheutkysVbA==";
    Date = "Fri, 30 Aug 2019 05:55:00 GMT";
    Etag = "\"86FE6EB9881E98B31B85EBAD932B156C\"";
    Server = AliyunOSS;
    "x-oss-hash-crc64ecma" = 6682316439168427881;
    "x-oss-request-id" = 5D68BA341FC81051D38D1EEA;
    "x-oss-server-time" = 42;
    }, local_crc64ecma: (null)}>
    */
    // 移除上传进度监听
    AliyunOSS.removeEventListener('uploadProgress');
  }).catch((error)=>{
    console.log(error);
    // 移除上传进度监听
    AliyunOSS.removeEventListener('uploadProgress');
  })

接口

主要介绍目前React Native SDK已经实现并部分支持的API，主要涉及到日志管理、Bucket管理、Object管理、授权、文件上传和下载等。后续持续完善相关API和BUG修复。API列表如下

API	Android	iOS
enableDevMode	支持	支持
initWithPlainTextAccessKey	支持	支持
initWithSigner	支持	支持
initWithSecurityToken	支持	支持
initWithServerSTS	支持	支持
asyncUpload	支持	支持
initMultipartUpload	支持	支持
multipartUpload	支持	支持
listParts	支持	支持
abortMultipartUpload	支持	支持
asyncDownload	支持	支持
asyncCreateBucket	支持	支持
asyncGetBucketACL	支持	支持
asyncListBuckets	支持	支持
asyncDeleteBucket	支持	支持
asyncHeadObject	支持	支持
asyncListObjects	支持	支持
doesObjectExist	支持	支持
asyncCopyObject	支持	支持
asyncDeleteObject	支持	支持

enableDevMode

该接口主要是开启日志记录功能,具体使用参考：

AliyunOSS.enableDevMode()

initWithPlainTextAccessKey(不建议)

该接口需要通过明文授权accesskeyId和accesskeySecret，开发者这可以使用，但是我们不建议

const endPoint = "XXX"
const configuration = {
    maxRetryCount: 3,
    timeoutIntervalForRequest: 30,
    timeoutIntervalForResource: 24 * 60 * 60
 };
AliyunOSS.initWithPlainTextAccessKey(accesskeyId, accesskeySecret, endPoint, configuration);

initWithSigner

该接口通过自签方式授权,请参考自签名模式,使用可查看

AliyunOSS.initWithSigner(signature, accessKey, endPoint, configuration);

initWithSecurityToken

该接口通过SecurityToken授权，参考STS访问控制,使用可查看

AliyunOSS.initWithSecurityToken(SecurityToken, accessKeyId, accessKeySecret, endPoint, configuration);

initWithServerSTS

该接口通过本地鉴权服务器授权，使用可查看

AliyunOSS.initWithSecurityToken(/*local auth server*/, endPoint, configuration);

asyncUpload

AliyunOSS.asyncUpload(bucketname, objectKey, filepath).then().catch()

asyncAppendObject

asyncResumableUpload

initMultipartUpload

 AliyunOSS.initMultipartUpload(bucketname,objectkey).then((e)=>{
       //e 为uploadId
       console.log(e)
    }).catch((error) => {
       console.log(error)
 })

multipartUpload

//uploadId为initMultipartUpload成功回调后的返回值
AliyunOSS.multipartUpload(multipartBucket,mulitipartObjectKey,uploadId,filepath).then((res)=>{
    Alert.alert("分片上传成功");
  }).catch((e) => {
    Alert.alert("分片上传失败");
  })

listParts

AliyunOSS.listParts(multipartBucket,multipartObjectKey,upoadId).then((e)=>{
    Alert.alert("onListParts"+e)
  }).catch((e)=>{
    Alert.alert("onListPartsError")
 })

abortMultipartUpload

 AliyunOSS.abortMultipartUpload(multipartBucket,multipartBucket,uploadId).then((e)=>{
    Alert.alert("分片终止成功");
  }).catch((e)=>{
    Alert.alert("分片终止失败");
  })

asyncDownload

 // xxx为图片处理选项，具体可查看官网
 AliyunOSS.asyncDownload(bucketname,objectkey,{"x-oss-process": 'xxxx'}).then((e) => {
    console.log(e)
  }).catch((e)=>{
    console.log(e)
  })

asyncCreateBucket

 AliyunOSS.asyncCreateBucket('tyluoluo','private','oss-cn-zhangjiakou').then((e) => {
    console.log(e)
  }).catch((e)=>{
     console.log(e)
  })

asyncGetBucketACL

 AliyunOSS.asyncGetBucketACL('luozhang002').then((e) => {
    console.log(e)
  }).catch((e)=>{
    console.log(e)
  })

asyncListBuckets

AliyunOSS.asyncListBuckets().then((e) => {
    console.log(e)
  }).catch((e) => {
    console.log(e)
  })

asyncDeleteBucket

 AliyunOSS.asyncDeleteBucket("tyluoluo").then((e) => {
    console.log(e)
  }).catch((e) => {
    console.log(e)
  })

asyncHeadObject

 AliyunOSS.asyncHeadObject('luozhang002','yanxing').then((e)=>{
    console.log(e)
  }).catch((e)=> {
     console.log(e)
 })

asyncListObjects

列举指定bucket下的objects

parameters:

name {String} bucket name
options {Object}
- delimiter {String} 用于对Object名字进行分组的字符。所有名字包含指定的前缀且第一次出现delimiter字符之间的object作为一组元素: CommonPrefixes。
- marker {String} 设定结果从marker之后按字母排序的第一个开始返回。
- maxkeys {Number} 限定此次返回object的最大数，如果不设定，默认为100，maxkeys取值不能大于1000。
- prefix {String} 限定返回的object key必须以prefix作为前缀。注意使用prefix查询时，返回的key中仍会包含prefix。

 AliyunOSS.asyncListObjects('luozhang002',{
    prefix:'xxxx'
  }).then((e)=>{
    console.log(e)
  }).catch((e)=>{
     console.log(e)
  })

doesObjectExist

 AliyunOSS.doesObjectExist('luozhang001','xx.png').then((e)=>{
    console.log(e)
  }).catch((e)=>{
     console.log(e)
  })

asyncCopyObject

 AliyunOSS.asyncCopyObject('luozhang001',"2.png","luozhang002","sbsbsb").then((e)=>{
      console.log(e)
    }).catch((e)=>{
      console.log("xxxx")
      console.log(e)
    })

asyncDeleteObject

 AliyunOSS.asyncDeleteObject('luozhang001','2.png').then((e)=>{
     Alert.alert(e)
  }).catch((e)=>{
    console.log(e)
  })

示例

仓库Example中提供了React Native android和iOS端运行demo，Android为Example下的android工程，iOS为Example下的iOS工程，目前Example提供了所有已开发的API DEMO，还在完善中，欢迎参与共建。如何运行Example呢？

step-1:克隆项目并安装依赖包

1. git clone https://github.com/aliyun/aliyun-oss-react-native.git
2. cd Example
3. npm install

step-2:启动本地鉴权服务器并修改Example/App.js中initWithServerSTS服务地址，注意服务地址要以IP开口

1. cd script/sts-app-server-node
2. node index.js

step-3:运行项目

npm run start
安卓使用Android Studio打开工程Example/android编译并运行,效果如图

ios使用XCode打开工程Example/NativeAddRN编译并运行，效果如图

常见问题

iOS端由于React Native自身环境的复杂性，会莫名奇妙的报各种编译错，请移步stackoverflow,或者直接可运行项目Example目录下IOS工程NativeAddRN进行对比，如何运行Example请参考示例
关闭代理
针对Android Studio调试环境下看不到界面，请删除工程文件下的Build/文件夹重新编译

参与开源

目前React Native SDK处于起步阶段，开发者使用React Native API的过程中，遇到任何问题都可以向官方仓库提Issue或者PR，我们会第一时间进行处理。欢迎广大开发者参与共建，修复和完善更多的API 来更好的服务使用阿里云存储服务的客户和开发者。具体开发可参考如下文档

React Native Android Native Modules：http://facebook.github.io/react-native/docs/native-modules-android.html
React Native IOS Native Modules：http://facebook.github.io/react-native/docs/native-modules-ios.html
React Native Debugging: http://facebook.github.io/react-native/docs/debugging.html
阿里云OSS安卓SDK：https://github.com/aliyun/aliyun-oss-android-sdk
阿里云OSS IOS SDK https://github.com/aliyun/aliyun-oss-ios-sdk

License

联系我们

阿里云OSS官方网站：http://oss.aliyun.com
阿里云OSS官方论坛：http://bbs.aliyun.com
阿里云OSS官方文档中心：http://www.aliyun.com/product/oss#Docs
阿里云官方技术支持登录OSS控制台 https://home.console.aliyun.com -> 点击"工单系统"

未来

未来持续改进、优化代码文档、新增接口、修复Bug等

文档

后续完善

oss react-native aliyun-sdk aliyun-oss aliyun-oss-react-native

@everything-registry/sub-chunk-1119 @zalastax/nolb-aliy

1.0.1

5 years ago

1.0.0

5 years ago