React Native
💡
升级到最新版本（≥ 1.0.0）以体验此自定义功能。
与在浏览器中运行的 React 不同，React Native 具有非常不同的用户体验。例如，没有“选项卡焦点”，从后台切换到应用程序被认为是“焦点”而不是。要自定义这些行为，您可以使用 React Native 的应用程序状态检测和其他本机移植的 API 替换默认的浏览器 focus 和 online 事件监听器，并配置 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 可以启动重新验证以保持您的数据最新。