React Native

与在浏览器内运行的 React 不同，React Native 具有非常不同的用户体验。例如，没有“选项卡焦点”，从后台切换到应用被视为“焦点”。要自定义这些行为，你可以使用 React Native 的应用状态检测和其他原生移植 API 替换默认的浏览器 focus 和 online 事件监听器，并配置 SWR 以使用它们。

¥Unlike React running inside the browsers, React Native has a very different user experience. For example there is no “tab focus”, switching from the background to the app is considered as a “focus” instead. To customize these behaviors, you can replace the default browser focus and online events listeners with React Native’s app state detection and other native ported API, and configure SWR to use them.

示例

¥Example

全局设置

¥Global Setup

你可以将你的应用封装在 SWRConfig 下并在那里预配置所有配置

¥You can wrap your app under SWRConfig and preconfig all configurations there

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

自定义 focus 和 reconnect 事件

¥Customize focus and reconnect Events

你需要注意的配置很少，例如 isOnline、isVisible、initFocus 和 initReconnect。

¥There're few configurations you need to take care of such as isOnline, isVisible, initFocus and initReconnect.

isOnline 和 isVisible 是返回布尔值的函数，以确定应用是否是 "active"。默认情况下，如果不满足这些条件，SWR 将取消重新验证。

¥isOnline and isVisible are functions that return a boolean, to determine if the application is "active". By default, SWR will bail out a revalidation if these conditions are not met.

当使用 initFocus 和 initReconnect 时，还需要设置 自定义缓存提供程序。你可以使用空的 Map() 或你喜欢的任何存储空间。

¥When using initFocus and initReconnect, it's required to also set up a custom cache provider. You can use an empty Map() or any storage you prefer.

<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 为例：

¥Let's take initFocus as example:

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 (opens in a new tab) 来订阅网络状态。实现将类似于上面的示例：接收 callback 功能并在网络从离线状态恢复时触发它，以便 SWR 可以启动重新验证以使你的数据保持最新。

¥For initReconnect, it requires some 3rd party libraries such as NetInfo (opens in a new tab) to subscribe to the network status. The implementation will be similar to the example above: receiving a callback function and trigger it when the network recovers from offline, so SWR can start a revalidation to keep your data up-to-date.