React Native
最新バージョン（≥ 1.0.0）にアップグレードして、このカスタマイズを体験してください。
ブラウザ内で実行されるReactとは異なり、React Nativeは非常に異なるユーザーエクスペリエンスを持っています。たとえば、「タブフォーカス」はなく、バックグラウンドからアプリに切り替えることが「フォーカス」と見なされます。これらの動作をカスタマイズするには、デフォルトのブラウザの`focus`および`online`イベントリスナーをReact Nativeのアプリ状態検出およびその他のネイティブ移植APIに置き換え、SWRを設定してそれらを使用します。
例
グローバルセットアップ
`SWRConfig`でアプリをラップし、そこで全ての構成を事前設定できます。
<SWRConfig
value={{
/* ... */
}}
>
<App>
</SWRConfig>`focus`と`reconnect`イベントのカスタマイズ
`isOnline`、`isVisible`、`initFocus`、`initReconnect`など、注意が必要な設定がいくつかあります。
`isOnline`と`isVisible`は、アプリケーションが「アクティブ」かどうかを判断するために、ブール値を返す関数です。 デフォルトでは、これらの条件が満たされない場合、SWRは再検証を中止します。
`initFocus`と`initReconnect`を使用する場合は、カスタムキャッシュプロバイダーも設定する必要があります。 空の`Map()`または任意のストレージを使用できます。
<SWRConfig
value={{
provider: () => new Map(),
isOnline() {
/* Customize the network state detector */
return true
},
isVisible() {
/* Customize the visibility state detector */
return true
},
initFocus(callback) {
/* Register the listener with your state provider */
},
initReconnect(callback) {
/* Register the listener with your state provider */
}
}}
>
<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 it's resuming from background or inactive mode to active one */
if (appState.match(/inactive|background/) && nextAppState === 'active') {
callback()
}
appState = nextAppState
}
// Subscribe to the app state change events
const subscription = AppState.addEventListener('change', onAppStateChange)
return () => {
subscription.remove()
}
}
}}
>
<App>
</SWRConfig>`initReconnect`の場合は、NetInfo （新しいタブで開きます）などのサードパーティライブラリを使用して、ネットワークステータスをサブスクライブする必要があります。実装は上記の例と似ています。`callback`関数を受け取り、ネットワークがオフラインから回復したときにトリガーして、SWRがデータを最新の状態に保つための再検証を開始できるようにします。