ネットワーク

多くのモバイルアプリは、リモートURLからリソースを読み込む必要があります。REST APIにPOSTリクエストを送信したり、別のサーバーから静的コンテンツのチャンクを取得する必要がある場合があります。

Fetchの使用

React Nativeは、ネットワークニーズに対応するためにFetch APIを提供しています。Fetchは、以前にXMLHttpRequestまたは他のネットワークAPIを使用したことがある場合は、馴染み深いでしょう。追加情報については、MDNのFetchの使用に関するガイドを参照してください。

リクエストの作成

任意のURLからコンテンツを取得するには、URLをfetchに渡すことができます

fetch('https://mywebsite.com/mydata.json');

Fetchは、HTTPリクエストをカスタマイズできるオプションの2番目の引数も受け取ります。追加のヘッダーを指定したり、POSTリクエストを作成したりすることができます

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

プロパティの完全なリストについては、Fetchリクエストドキュメントをご覧ください。

レスポンスの処理

上記の例は、リクエストの作成方法を示しています。多くの場合、レスポンスに対して何らかの処理を実行する必要があります。

ネットワークは本質的に非同期操作です。Fetchメソッドは、非同期的に動作するコードを簡単に記述できるPromiseを返します

const getMoviesFromApi = () => {
  return fetch('https://reactnative.dokyumento.jp/movies.json')
    .then(response => response.json())
    .then(json => {
      return json.movies;
    })
    .catch(error => {
      console.error(error);
    });
};

React Nativeアプリでasync / await構文を使用することもできます

const getMoviesFromApiAsync = async () => {
  try {
    const response = await fetch(
      'https://reactnative.dokyumento.jp/movies.json',
    );
    const json = await response.json();
    return json.movies;
  } catch (error) {
    console.error(error);
  }
};

fetchによってスローされる可能性のあるエラーをキャッチすることを忘れないでください。そうでない場合、エラーはサイレントにドロップされます。

TypeScript

JavaScript

デフォルトでは、iOS 9.0以降はApp Transport Security（ATS）を適用します。ATSでは、HTTP接続はHTTPSを使用する必要があります。クリアテキストURL（httpで始まるURL）からフェッチする必要がある場合は、最初にATS例外を追加する必要があります。アクセスする必要があるドメインを事前に知っている場合は、それらのドメインのみに例外を追加する方が安全です。ドメインがランタイムまでわからない場合は、ATSを完全に無効にすることができます。ただし、2017年1月以降、AppleのApp Storeレビューでは、ATSを無効にすることについて合理的な理由が必要になります。詳細については、Appleのドキュメントを参照してください。

Androidでは、APIレベル28以降、クリアテキストトラフィックもデフォルトでブロックされます。この動作は、アプリマニフェストファイルでandroid:usesCleartextTrafficを設定することでオーバーライドできます。

他のネットワークライブラリの使用

XMLHttpRequest APIはReact Nativeに組み込まれています。これは、それに依存するfrisbeeやaxiosなどのサードパーティライブラリを使用できることを意味します。または、必要に応じてXMLHttpRequest APIを直接使用することもできます。

const request = new XMLHttpRequest();
request.onreadystatechange = e => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

XMLHttpRequestのセキュリティモデルは、ネイティブアプリにはCORSの概念がないため、Webとは異なります。

WebSocketのサポート

React Nativeは、単一のTCP接続を介して全二重通信チャネルを提供するプロトコルであるWebSocketsもサポートしています。

const ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = e => {
  // a message was received
  console.log(e.data);
};

ws.onerror = e => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = e => {
  // connection closed
  console.log(e.code, e.reason);
};

fetchとCookieベースの認証に関する既知の問題

次のオプションは現在fetchでは機能していません

• redirect:manual
• credentials:omit

• Androidで同じ名前のヘッダーを使用すると、最新のヘッダーのみが存在することになります。一時的な解決策は、こちらにあります：https://github.com/facebook/react-native/issues/18837#issuecomment-398779994。
• Cookieベースの認証は現在不安定です。発生している問題の一部は、こちらで確認できます：https://github.com/facebook/react-native/issues/23185
• iOSでは、最低限、302を介してリダイレクトされた場合、Set-Cookieヘッダーが存在する場合、Cookieは正しく設定されません。リダイレクトを手動で処理できないため、リダイレクトがセッションの有効期限切れの結果である場合、無限のリクエストが発生するシナリオが発生する可能性があります。

iOSでのNSURLSessionの構成

一部のアプリケーションでは、iOSで実行されているReact Nativeアプリケーションのネットワークリクエストに使用される基になるNSURLSessionにカスタムNSURLSessionConfigurationを提供することが適切な場合があります。たとえば、アプリからのすべてのネットワークリクエストにカスタムユーザーエージェント文字列を設定したり、NSURLSessionに一時的なNSURLSessionConfigurationを提供したりする必要がある場合があります。関数RCTSetCustomNSURLSessionConfigurationProviderはこのようなカスタマイズを可能にします。 RCTSetCustomNSURLSessionConfigurationProviderが呼び出されるファイルに次のインポートを追加することを忘れないでください

#import <React/RCTHTTPRequestHandler.h>

RCTSetCustomNSURLSessionConfigurationProviderは、Reactで必要なときにすぐに利用できるように、アプリケーションのライフサイクルの初期に呼び出す必要があります。たとえば、

-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  // set RCTSetCustomNSURLSessionConfigurationProvider
  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
     // configure the session
     return configuration;
  });

  // set up React
  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
}