美文网首页
Taro(React Native)集成阿里云oss上传文件

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

作者: 行走世间全都是妖怪 | 来源:发表于2020-11-25 18:17 被阅读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真机,运行成功。

    相关文章

      网友评论

          本文标题:Taro(React Native)集成阿里云oss上传文件

          本文链接:https://www.haomeiwen.com/subject/nsqniktx.html