RN使用react-native-image-picker + aliyun-oss-react-native上传图片_react native 如何上传图片到 oss-优快云博客

这篇博客介绍了如何在React Native应用中结合react-native-image-picker库选择图片，并利用aliyun-oss-react-native库将图片上传到阿里云OSS。文章详细讲解了在Android端添加相关依赖的步骤，包括在settings.gradle、build.gradle和MainApplication.java中的配置修改。同时，文中还提及了可能出现的问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RN使用react-native-image-picker + aliyun-oss-react-native 上传图片

今天记录一下在RN使用react-native-image-picker以及aliyun-oss-react-native完成上传图片

如果是原生和RN混合开发，首先执行以下代码：

yarn add react-native-image-picker
yarn add aliyun-oss-react-native

然后在Android添加依赖：
1.在android/settings.gradle里增加代码：

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

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

2.在android/app/build.gradle里增加代码：

dependencies {
   
   
+		compile project(':react-native-image-picker')
+		compile project(':aliyun-oss-react-native')
}

3.在android/app/src/main/java/…/MainApplication.java里增加代码

package com.myapp;

+ import com.imagepicker.ImagePickerPackage;
+ import com.reactlibrary.RNAliyunOssPackage;

    @Override
    protected List<ReactPackage> getPackages() {
   
   
        return Arrays.<ReactPackage>asList(
+           new ImagePickerPackage()
+ 			new RNAliyunOssPackage()
        );
    }

}

RN页面代码：

import React,{
   
    PureComponent } from 'react';
import {
   
    View, StyleSheet } from