React Native开发经验集React-Native 开发阵营React Native开发

react-native 0.54.3版本中可以使用fetch请

2018-03-30  本文已影响196人  NextStack

最近更新下一栈的RN版本,从0.53更到了0.54.3,然后发现之前请求图片二进制数据的代码无法使用了!

调试了很久,才发现了最终原因:
fetch API支持了blob数据请求,于是上个帖子React-Native使用fetch获取二进制数据中的办法自然而然失效了。

新办法

得知fetch返回的类型支持blob之后,我们就考虑把这个blob数据转成base64了,我使用的代码如下:

function LoadImage (url) {
  return new Promise((RES, REJ) => {
    fetch(url).then(r => r.blob()).then(blob => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        RES(data.split('base64,')[1]);
      }
      reader.readAsDataURL(blob);
    }).catch(REJ);
  })
}

export default LoadImage;

调用方法:

LoadImage('https://nextstack.xyz/static/qrcode.png`).then(base64 => {
  console.log('图片的base64编码');
})

提示:RN中的FileReader不支持readAsArrayBufferreadAsBinaryString等数据转换,所以我们这里用readAsDataURL

上一篇 下一篇

猜你喜欢

热点阅读