Skip to content
文档
高级
React Native

React Native

💡

升级到最新版本(≥ 1.0.0)来体验该定制。

与在浏览器中运行的 React 不同,React Native 有着非常不同的使用体验。比如没有“标签聚焦”,而从后台切换到 app 则被视为“聚焦”。要想自定义这些行为,你可以使用 React Native 的 app 状态检测和其他原生移植 API 替换默认的 focusonline,并配置 SWR 来使用。

示例

全局设置

你可以将 app 包装在 SWRConfig 下并预设置所有配置

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

自定义 focusreconnect 事件

只有很少的的配置需要你来处理,诸如 isOnlineisVisibleinitFocus 以及 initReconnect

isOnlineisVisible 是两个返回布尔值的函数,它们用来确定应用程序是否是 "active" 的。默认情况下,如果不满足这些条件,SWR 将取消重新请求。

在使用 initFocusinitReconnect 时,还需要设置一个自定义缓存 provider。可以使用空的 Map() 或任何你喜欢的。

<SWRConfig
  value={{
    provider: () => new Map(),
    isOnline() {
      /* 自定义网络状态检测器 */
      return true
    },
    isVisible() {
      /* 自定义 visibility 状态检测器 */
      return true
    },
    initFocus(callback) {
      /* 向状态 provider 注册侦听器 */
    },
    initReconnect(callback) {
      /* 向状态 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) => {
        /* 如果正在从后台或非 active 模式恢复到 active 模式 */
        if (appState.match(/inactive|background/) && nextAppState === 'active') {
          callback()
        }
        appState = nextAppState
      }
 
      // 订阅 app 状态更改事件
      const subscription = AppState.addEventListener('change', onAppStateChange)
      
      return () => {
        subscription.remove()
      }
    }
  }}
>
  <App>
</SWRConfig>

关于 initReconnect,它需要第三方库例如 NetInfo (opens in a new tab) 来订阅网络状态。具体实现和上面的例子类似:接收 callback 函数并在网络从离线状态恢复时触发它,然后 SWR 会启动重新请求以确保数据始终是最新的。