При работе над родным приложением реакции иногда нам нужно получить строку base64 из URL-адреса файла (изображения/видео). Существует множество доступных пакетов, которые преобразуют URL-адрес в base64, но они не дают ожидаемых результатов. Наконец, я попробовал библиотеку «rn-fetch-blob» и смог получить ожидаемые результаты.

Библиотека rn-fetch-blob предоставляет множество файловых систем и сетевых функций, которые упрощают доступ к файлам и передачу файловых данных и делают их более эффективными для разработчиков React Native.

Установки:
npm install --save rn-fetch-blob
Для ios: при использовании CocoaPods добавьте приведенный ниже текст в свой подфайл
pod 'rn-fetch-blob',
:path => '../node_modules/rn-fetch-blob'
Если вы используете версию react-native 0.29.2+, затем выполните приведенную ниже команду
react-native link rn-fetch-blob
Что касается проектов ‹ 0.29, вам понадобится «rnpm», чтобы связать нативные пакеты
rnpm link

Использование:

Добавьте следующие две строки вверху файла:
import RNFetchBlob from "rn-fetch-blob";
const fs = RNFetchBlob.fs;

И добавьте приведенный ниже код в свою функцию, где вы хотите преобразовать файл из URL-адреса в строку base64.
let imagePath = "https://i2.wp.com/miro.medium.com/max/1856/1*TV0dKZKjMjp1J7b9oW58Rg.jpeg";
// set the image/video path here
RNFetchBlob.config({
fileCache: true
}).fetch("GET", imagePath) // the file is now downloaded at local storage
.then(resp => {
imagePath = resp.path(); // to get the file path
return resp.readFile("base64"); // to get the base64 string
})
.then(base64 => {
// here base64 encoded file data is returned
this.setState({base64Data: base64});
return fs.unlink(imagePath); // to remove the file from local storage
});

Webner Solutions — компания по разработке программного обеспечения, специализирующаяся на разработке систем управления страховыми агентствами, систем управления обучением и приложений Salesforce. Свяжитесь с нами по адресу [email protected] для подачи заявок на страхование, электронное обучение и Salesforce.

Первоначально опубликовано на https://blog.webnersolutions.com 9 июля 2021 г.