Taro(React Native)集成阿里云oss上传文件

2020-11-25  本文已影响0人  行走世间全都是妖怪

        1、在壳子根目录下终端执行命令

npm install aliyun-oss-rn --save

报错

找到taro-native-shell/node_modules/react-native-push-notification/.git文件,删除,重新执行命令成功。

再次执行命令

react-native link aliyun-oss-rn

进入你的项目根目录下(taro的非壳子目录),按同样的步骤,执行命令

npm install aliyun-oss-rn --save

2、再次运行Android 时报错

把react-native-aliyun-oss-cp下的build.gradle修改如下

3、再次运行报错

修改AndroidManifest.xml文件如下

至此,Android 可正常运行。

4、在React Native文件中编写OSS上传的相关代码(本文章以图片上传为例),加入代码:

import aliyunOssRn from 'aliyun-oss-rn';

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

const endPoint = 'oss-cn-shanghai.aliyuncs.com'; // your endPoint

function initOss() { AliyunOSS.enableDevMode();

         aliyunOssRn.initWithPlainTextAccessKey('xxxxxxx', 'xxxxxxxx', endPoint, configuration);

}

const uploadFile = (file, fileName) => { AliyunOSS.asyncUpload('yh-jy-app', fileName, file).then((resp) => { console.log(resp); }).catch((error) => { console.log(error); }); }

这里一定要注意bucketName,并不是要创建的文件夹,而是你整个链接中的前部分,一般是https://之后,endPoint之前的部分。根据调试日志,可以看到上传文件成功

5、ios运行验证(不要设置这一步,下面的第7点会说清楚)

进入Xcode,打开taro-native-shell/ios下的taroDemo.xcworkspace发现aliyun-oss-rn库在上面的link步骤中没成功,需要进行手动安装

一、在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-rn/ios/AliyunSDK

6、完成后,终端进入ios文件夹执行pod install报错

把aliyun-oss-rn库下的aliyun-oss-react-native.podspec文件修改为aliyun-oss-rn.podspec重新执行pod install命令,报错

在Xcode中找到Podfile文件,找到pod 'aliyun-oss-react-native', :path => '../node_modules/aliyun-oss-rn'修改为pod 'aliyun-oss-rn', :path => '../node_modules/aliyun-oss-rn',如下

重新执行pod install(时间有点长)完成。

7、xcode运行iOS报错

把第5点的步骤全都去除掉,只保留第6步中的修改,xcode运行成功,模拟器运行成功。

运行ios真机,运行成功。

上一篇下一篇

猜你喜欢

热点阅读