Всем привет.

Я Шериф, старший разработчик RN и консультант по обеспечению качества.

Когда я начал изучать RN и действительно начал понимать, насколько это здорово, я подумал, что это отличная идея начать с приложения для социальных сетей, основанного на загрузке изображений на серверы, как в Instagram.

Тогда это звучало как простая идея. Но я застрял на первом варианте использования — загрузка изображений на сервер. Так что, если вы новичок в RN сегодня, я помогу вам с этим вопросом.

Прежде всего, прежде чем загружать изображения на сервер, мы должны загрузить их в приложение, для этого есть очень популярная библиотека под названием react-native-image-picker.
Чтобы установите его, просто запустив в корне вашего проекта:

-npm install react-native-image-picker
-react-native link react-native-image-picker

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

import ImagePicker from 'react-native-image-picker';

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
    });
  }
});

Преобразование в base64

Самый простой способ отправить изображение на сервер — отправить его в формате base64.
И вот здесь все становится сложнее. В React Native нет специальной библиотеки, которая предоставляет нам простые в использовании файлы с кодировкой base64, поэтому мы собираемся использовать трюк, чтобы заставить ее работать.

Вот состояние, которое мы восстановили с помощью react-native-image-picker.
поэтому, чтобы создать хороший base64, мы просто добавляем "data:image/jpeg;base64",
 передкодом, который мы получили в нашем состоянии.

const image= "data:image/jpeg;base64," + this.state.source

наконец, вот простая функция, которая отправляет изображение в кодировке base64, которое мы создали, в API dbaretna.com.

export function sendImages(image) {
  const url = "http://www.dbaretna.com/api/base64/img";
return fetch(url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      img: image
    })
  }).catch(error => {
    console.warn(error);
  });
}

Спасибо за уделенное время.
Я надеюсь, что это может помочь, если у вас есть какие-либо вопросы, не стесняйтесь комментировать или связаться со мной по электронной почте:
[email protected]
Linkedin: https://www.linkedin.com/in/ch%C3%A9rif-mezdari/