React Native

React Query 设计为可以与 React Native 一起使用，但 devtools 除外，而 devtools 目前仅受 React DOM 支持。如果您想帮助我们使 devtools 跨平台，请告诉我们！

现在有一个使用第三方插件 Flipper 的方案：https://github.com/bgaleotti/react-query-native-devtools

如果您想帮助我们使第一方的 devtools 跨平台，请告诉我们！

重新连接时的自动重新获取

React Query 已支持在浏览器中的重新连网时的自动重新获取。

如果想在 React Native 中使用这一特性，你需要像下面的例子一样，使用 onlineManager：

TypeScript

1import NetInfo from "@react-native-community/netinfo";2import { onlineManager } from "react-query";3 4onlineManager.setEventListener((setOnline) => {5  return NetInfo.addEventListener((state) => {6    setOnline(state.isConnected);7  });8});

在 App 中基于焦点的重新获取

在 React Native 中，你需要使用 focusManager 来使得此特性生效。

你也可以使用一个叫 'react-native-appstate-hook' 的包来通知 React Query。

TypeScript

1import { focusManager } from "react-query";2import useAppState from "react-native-appstate-hook";3 4function onAppStateChange(status: AppStateStatus) {5  if (Platform.OS !== "web") {6    focusManager.setFocused(status === "active");7  }8}9 10useAppState({11  onChange: onAppStateChange,12});

屏幕的基于焦点的重新获取

在某些情况下，你可能想要在 React Native 的屏幕被重新聚焦时再次获取新的数据。

这个自定义的 Hook 会在屏幕被重新聚焦时调用传入的 refetch 函数。

TypeScript

1import React from "react";2import { useFocusEffect } from "@react-navigation/native";3 4export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {5  const firstTimeRef = React.useRef(true);6 7  useFocusEffect(8    React.useCallback(() => {9      if (firstTimeRef.current) {10        firstTimeRef.current = false;11        return;12      }13 14      refetch();15    }, [refetch]),16  );17}

在上面的代码中，跳过了refetch方法一次，因为除了屏幕焦点外，useFocusEffect在挂载时也会调用我们的回调。