Отобразить изображение BLOB-объекта в программе «Натив» (Expo)

Question

У меня есть следующая функция извлечения в моем собственном реактивном проекте, чтобы вернуть изображение BLOB-объекта из MS Graph, возврат работает, но я не могу отобразить BLOB-объект как изображение.

        //Blob Picture
      fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
        headers: { 'Authorization': "Bearer " + accessToken },
      })
        .then((response) => {
          // console.log(response);
               this.setState({ BlobImage: response});
        })
        .catch((error) => {
          console.error(error);
        });

Тогда я хочучтобы отобразить изображение так:

   <Image source={{uri: BlobImage}} style={{ height: 200, width: null, flex: 1 }}/>

Answer 1

Один из способов - конвертировать ваш BLOB-объект в base64 и использовать его как URI, как описано здесь Но я бы предпочел использовать rn-fetch-blob и использовать путь, поскольку он более прямой. проверьте этот пример:

RNFetchBlob
  .config({
    fileCache : true,
    // by adding this option, the temp files will have a file extension
    appendExt : 'png'
  })
  .fetch('GET', 'http://www.example.com/file/example.zip', {
    //some headers ..
  })
  .then((res) => {
    // the temp file path with file extension `png`
    console.log('The file saved to ', res.path())
    // Beware that when using a file path as Image source on Android,
    // you must prepend "file://"" before the file path
    imageView = <Image source={{ uri : Platform.OS === 'android' ? 'file://' + res.path() : '' + res.path() }}/>
  })