React-Native-Upload 使用指南

最新推荐文章于 2024-08-24 08:00:23 发布

黎纯俪Forest

最新推荐文章于 2024-08-24 08:00:23 发布

阅读量776

点赞数 7

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00404/article/details/141246297

React-Native-Upload 使用指南

react-native-upload( MacOs ) 一键打包部署 android/ios APP到各个测试平台和App Store。ci/cd神器，拒绝繁琐项目地址:https://gitcode.com/gh_mirrors/re/react-native-upload

项目介绍

React-Native-Upload 是一个用于在 React Native 应用中上传文件的库，支持Android和iOS平台，包括从相册选择的资产。其关键特性在于即使应用在后台也能继续上传文件，这对于上传大文件如视频时非常有用。请注意，对于React Native 47.0及以上版本推荐使用4.x主版本，若低于此版本，则应安装3.0系列。

快速启动

安装

首先，你需要安装这个包到你的项目里：

npm install --save react-native-upload

或如果你使用Yarn：

yarn add react-native-upload

对于React Native版本小于0.47，请务必使用react-native-upload@3.0.0。

链接原生模块

对于React Native 0.60及以上版本，自动原生链接功能已启用，只需确保执行以下步骤于iOS端：

cd ios && pod install && cd ..

对于较旧的版本（React Native < 0.60），则需手动链接：

iOS: 在Xcode中右键点击“Libraries” ➜ “Add Files to ...” ，然后选择node_modules/react-native-upload/ios/VydiaRNFileUploader.xcodeproj。接着，在“Build Phases” ➜ “Link Binary With Libraries” 添加VydiaRNFileUploader。
Android: 修改android/settings.gradle添加项目并修改android/app/build.gradle配置。

// android/settings.gradle
include ':react-native-background-upload'
project(':react-native-background-upload').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-background-upload/android')

// android/app/build.gradle
configurations.all {
    resolutionStrategy.eachDependency { DependencyDetails details ->
        if (details.requested.group == 'com.squareup.okhttp3') {
            details.useVersion '3.4.1'
        }
    }
}
dependencies {
    implementation project(':react-native-background-upload')
}
// MainApplication.java 追加导入及注册包
import com.vydia.RNUploader.UploaderReactPackage;
...
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new UploaderReactPackage()  // 注册该上传包
    );
}

使用示例

在你的React组件内引入并调用上传方法：

import React, { Component } from 'react';
import { Button } from 'react-native';
import { uploadFile } from 'react-native-upload';

class App extends Component {
  
  handleUpload = () => {
    const options = {
      url: 'http://example.com/upload', // 替换为实际上传地址
      path: '/path/to/local/file', // 文件本地路径
      field: 'file', // 表单字段名
    };
    uploadFile(options)
      .then(response => console.log('上传成功:', response))
      .catch(error => console.error('上传失败:', error));
  };

  render() {
    return (
      <Button title="上传文件" onPress={this.handleUpload} />
    );
  }
}

export default App;