1

反応ネイティブ アプリでフェッチを使用して Stream apiを使用しようとしていました。コードは次のようなものです:-

fetch('https://html.spec.whatwg.org/').then(function(response) {
  console.log('response::-', response)
  var reader = response.body.getReader();
  var bytesReceived = 0;

  reader.read().then(function processResult(result) {
    if (result.done) {
      console.log("Fetch complete");
      return;
    }
    bytesReceived += result.value.length;
    console.log(`Received ${bytesReceived} bytes of data so far`);

    return reader.read().then(processResult);
  });
});

ストリーム API リファレンスは次のとおりです:-

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

しかし、react-native の fetch 実装はブラウザーとほとんど変わらないようで、Web で使用されているのと同じように Stream を使用するのは簡単ではありません。

同じhttps://github.com/facebook/react-native/issues/12912のreact-nativeには未解決の問題がすでにあり ます

Web では、 response.body.getReader()からストリームにアクセスできます。ここで、応答は、ストリーム URL のフェッチ呼び出しから返される通常の結果ですが、反応ネイティブでは、ボディにアクセスする方法がないため、フェッチ呼び出しの応答から getReader にアクセスできません。 .

したがって、これを克服するために、ストリームをサポートしているため、 rn-fetch-blob npm packageを使用しようとしましたが、 readStream 関数が Authorization およびその他の必要なヘッダーを渡すサポートを持っていないように見えるため、ロケールファイルパスからのみサポートしているようです、そのため、リモート URL と必要なヘッダーで RNFetchBlob.fetch を使用してから、応答から readStream メソッドを使用しようとしましたが、現在の応答にはストリームがないと常に返されます。

RNFetchBlob.fetch('GET', 'https://html.spec.whatwg.org/')
      .progress((received, total) => {
        console.log('progress', received / total);
      })
      .then((resp) => {
        // const path = resp.path();
        console.log('resp success:-', resp);
        RNFetchBlob.fs.readStream(path, 'utf8').then((stream) => {
          let data = '';
          stream.open();
          stream.onData((chunk) => {
            data += chunk;
          });
          stream.onEnd(() => {
            console.log('readStream::-', data);
          });
        // });
      })
      .catch((err) => {
        console.log('trackAppointmentStatus::-', err);
      });

私の両方のアプローチで何か間違ったことをしている可能性があるため、将来、私や他の誰かに役立つガイダンスはほとんどありません. または、ブリッジを作成してネイティブで行う方法を見つける必要があるかもしれません。

4

0 に答える 0