Отображать изображение профиля с помощью expo

#react-native #expo

#react-native #expo

Вопрос:

Я новичок в React native и expo, и я пытаюсь обрабатывать профиль пользователя (редактировать профиль, изображение профиля и т. Д.).

Мне удалось успешно извлечь информацию о пользователе из API и отправить ему изменения, такие как имя пользователя или пароль, но я не могу сделать это для изображения профиля.

Я уже пробовал использовать axios (то, что я использую для связи с API):

 async componentDidMount() {
const token = await this.getToken();
const AuthStr = 'Bearer '.concat(token);

await axios.get('https://....jpg', { headers: { Authorization: AuthStr } })
  .then(res => {
    console.log('RESPONSE: ', res.data);
  })
  .catch((error) => {
    console.log('error '   error);
  });
}
  

Но это возвращает мне ошибку 500

Затем я попробовал с файловой системой из Expo:

 let download = FileSystem.createDownloadResumable('https://...jpg',
    FileSystem.documentDirectory   'profile.jpg',
    { headers: { Authorization: AuthStr } },
    null,
    null);
    try {
      const { uri } = await download.downloadAsync();
      console.log('Finished downloading to ', uri);
      this.setState({
        pic: uri,
      });
    } catch (e) {
      console.error(e);
    }

    let info = await FileSystem.getInfoAsync(this.state.pic, null);
    console.log(info);
  

В журнале указано, что файл загружен, а путь примерно такой:
file:///var/mobile/Containers/Data/Application/20CF6F63-E14D-4C14-9078-EEAF50A37DE1/Documents/ExponentExperienceData/%40anonymous%app/profile.jpg

Функция getInfoAsync() возвращает значение true, означающее, что изображение существует в файловой системе. Когда я пытаюсь отобразить его с помощью <Image source={{uri: this.state.pic}}/> , он ничего не отображает. Что я делаю не так?

Комментарии:

1. Вы проверили объем файла изображения, который вы сохраняете?

2. Вы правы, я думаю, что с загрузкой что-то не так, потому что getInfoAsync показывает, что файл имеет размер всего 111 байт, но я понятия не имею, почему

Ответ №1:

временное решение — переместить изображение в галерею

 let { uri } = await FileSystem.downloadAsync(this.props.item.imgUrl, FileSystem.cacheDirectory   ${this.props.item}.jpg);
  

 const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);

if (status === 'granted') {

  CameraRoll.saveToCameraRoll(uri).then((uriGallery) => {
      //here you have the url of the gallery to be able to use it
  });

}
  

Это ссылка, на которую я ссылался при написании ответа.

Комментарии:

1. Я только что протестировал и получил ошибку Error decoding image data <NSData 0x28076e280; 111 bytes> . Я думаю, что это скорее проблема с загрузкой изображения, но я не знаю, где оно должно быть

2. Если вы посмотрите на прикрепленную ссылку, вы поймете