Skip to content
ドキュメント
高度な使い方
React Native

React Native

💡

このカスタマイズを体験するには、最新バージョン( ≥ 1.0.0 )にアップグレードしてください。

ブラウザ内で実行されている React とは異なり、React Native の使用体験は大きく異なります。たとえば、“タブフォーカス”はなく、バックグラウンドからアプリの切り替えは“フォーカス”とみなされます。 これらの動作をカスタマイズするには、デフォルトの focusonline のイベントリスナーを React Native のアプリの状態検出や、その他のネイティブ移植 API に置き換えて使用するように SWR を構成します。

グローバル設定

アプリを SWRConfig でラップし、すべての構成を事前に設定できます。

<SWRConfig
  value={{
    /* ... */
  }}
>
  <App>
</SWRConfig>

focusreconnect イベントのカスタマイズ

isOnlineisVisibleinitFocusinitReconnect など、いくつかの設定を行う必要があります。

isOnlineisVisible は、アプリケーションが"アクティブ"であるかどうかを判断するための真偽値を返す関数です。デフォルトでは、これらの条件が満たされてない場合、 SWR は再検証を中止します。

initFocusinitReconnect を使用する場合は、カスタムキャッシュプロバイダーも設定する必要があります。空の Map() 、または任意のストレージを使用できます。

<SWRConfig
  value={{
    provider: () => new Map(),
    isOnline() {
      /* ネットワーク状態の検出器をカスタマイズ */
      return true
    },
    isVisible() {
      /* 視認状態の検出器をカスタマイズ */
      return true
    },
    initFocus(callback) {
      /* リスナーをステートプロバイダーに登録 */
    },
    initReconnect(callback) {
      /* リスナーをステートプロバイダーに登録 */
    }
  }}
>
  <App />
</SWRConfig>

ここでは、 initFocus を例に説明します:

import { AppState } from 'react-native'
 
// ...
 
<SWRConfig
  value={{
    provider: () => new Map(),
    isVisible: () => { return true },
    initFocus(callback) {
      let appState = AppState.currentState
 
      const onAppStateChange = (nextAppState) => {
        /* バックグラウンドモードまたは非アクティブモードからアクティブモードに再開する場合 */
        if (appState.match(/inactive|background/) && nextAppState === 'active') {
          callback()
        }
        appState = nextAppState
      }
 
      // アプリの状態変更を監視する
      const subscription = AppState.addEventListener('change', onAppStateChange)
 
      return () => {
        subscription.remove()
      }
    }
  }}
>
  <App>
</SWRConfig>

initReconnect の場合、ネットワーク状態を監視するには NetInfo (opens in a new tab) などのサードパーティ製のライブラリが必要です。実装は上記の例と同様です: callback 関数を受け取り、ネットワークがオフラインから復帰したときに実行するため、 SWR は再検証を開始してデータを最新の状態に保つことができます。