1、在壳子根目录下终端执行命令
npm install aliyun-oss-rn --save
报错
![](https://img.haomeiwen.com/i16092017/f9af45d95f39bfce.png)
找到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 时报错
![](https://img.haomeiwen.com/i16092017/ce1ec88ee1b6fea9.png)
把react-native-aliyun-oss-cp下的build.gradle修改如下
![](https://img.haomeiwen.com/i16092017/b84cc3bbc282dba0.png)
3、再次运行报错
![](https://img.haomeiwen.com/i16092017/ded9ac19fe5fadc1.png)
修改AndroidManifest.xml文件如下
![](https://img.haomeiwen.com/i16092017/ef64c92ccf310ca9.png)
至此,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); }); }
![](https://img.haomeiwen.com/i16092017/1b88c590cc0c1330.png)
这里一定要注意bucketName,并不是要创建的文件夹,而是你整个链接中的前部分,一般是https://之后,endPoint之前的部分。根据调试日志,可以看到上传文件成功
![](https://img.haomeiwen.com/i16092017/e8416845614e15e8.png)
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
![](https://img.haomeiwen.com/i16092017/20aa4f1f83a8bc6d.png)
二、在XCode Project navigator面板中, 添加libRNAliyunOSS.a to Build Phases -> Link Binary With Libraries
![](https://img.haomeiwen.com/i16092017/696eaf6b9e19a9c4.png)
三、在XCode Project navigator面板中,右键单击[framework] ➜ Add Files to [your project's name]. 进入node_modules ➜ aliyun-oss-rn-sdk ➜ AliyunSDK. Add AliyunOSSiOS.framework
![](https://img.haomeiwen.com/i16092017/54316a9fb1fe0212.png)
四、在XCode Project navigator面板中,选择项目,在 Build Settings 中搜索 Framework Search Paths,双击右侧的列表,添加路径 $(SRCROOT)/../node_modules/aliyun-oss-rn/ios/AliyunSDK
![](https://img.haomeiwen.com/i16092017/e58ba5a37932f8b3.png)
6、完成后,终端进入ios文件夹执行pod install报错
![](https://img.haomeiwen.com/i16092017/b1da18ceeb54ee34.png)
把aliyun-oss-rn库下的aliyun-oss-react-native.podspec文件修改为aliyun-oss-rn.podspec重新执行pod install命令,报错
![](https://img.haomeiwen.com/i16092017/f7f419119f070e26.png)
在Xcode中找到Podfile文件,找到pod 'aliyun-oss-react-native', :path => '../node_modules/aliyun-oss-rn'修改为pod 'aliyun-oss-rn', :path => '../node_modules/aliyun-oss-rn',如下
![](https://img.haomeiwen.com/i16092017/e2c285f938a7275f.png)
重新执行pod install(时间有点长)完成。
7、xcode运行iOS报错
![](https://img.haomeiwen.com/i16092017/a0355799fa4681ea.png)
把第5点的步骤全都去除掉,只保留第6步中的修改,xcode运行成功,模拟器运行成功。
运行ios真机,运行成功。
网友评论