Get best of the week

React Native-将照片和视频保存到设备库

对于许多React Native开发人员而言，将照片和视频保存到android / ios设备是一个挑战。在本文中，我将展示如何通过url轻松轻松地将照片保存到设备。

首先，我们需要两个库：

  1. @ react-native-community / cameraroll-提供对图库的访问（我仅在1.4.0版本中成功。“ fresher”版本中存在众所周知的错误，如果您成功使用其他版本，请写出）
  2. rn-fetch-blob-访问本地应用程序文件。应该注意的是，这个库可以使用本机版本0.60和更高版本来工作。


iOS


在ios上，一切都变得非常简单：

1.添加到Info.plist
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>

2.实施
import CameraRoll from '@react-native-community/cameraroll';

const saveImageInDevice = async (url) => {
    await CameraRoll.saveToCameraRoll(url, 'photo');
}

就这样！saveImageInDevice函数接受链接地址作为输入。CameraRoll.saveToCameraRoll下载文件并将其保存到设备库中。saveToCameraRoll方法的第二个参数也可以是“ video”

安卓系统


Android设备要复杂一些。事实是，在android上，saveToCameraRoll方法不知道如何使用外部网址。首先，我们需要将文件上传到外部存储，然后上传到图库：

import {PermissionsAndroid} from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
import RNFetchBlob from 'rn-fetch-blob';

//      
const checkAndroidPermission = async () => {
    const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
    await PermissionsAndroid.request(permission);
};

const saveImageInDevice = async (url) => {
     await checkAndroidPermission();
        let res = await RNFetchBlob
          .config({
            fileCache : true,
            appendExt : 'jpg' 
          })
          .fetch('GET', url);
     url = res.path();
     await CameraRoll.saveToCameraRoll(url, 'photo');
}


RNFetchBlob.fetch通过GET请求会将文件上传到外部存储，并传递此文件的url。然后CameraRoll.saveToCameraRoll将此文件上传到图库。

就这样。感谢您的关注！

链接：
github.com/react-native-community/react-native-cameraroll
github.com/joltup/rn-fetch-blob

More articles:


All Articles