React Native

React 查看英文原文 ↗

React Query 设计为可以与 React Native 一起使用，但 devtools 除外，而 devtools 目前仅受 React DOM 支持。

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

另一个第三方插件 Reactotron 的方案：https://github.com/hsndmr/reactotron-react-query

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

在线状态的管理

React Query 已经支持在网络断线重连时的数据自动重新获取。

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

TypeScript

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

基于 App 焦点的重新获取

React Native 通过AppState模块提供焦点信息，而不是window上的事件监听器。你可以使用AppState的"change"事件，在应用状态变为"active"时触发更新。

TypeScript

1import { useEffect } from "react";2import { AppState, Platform } from "react-native";3import type { AppStateStatus } from "react-native";4import { focusManager } from "@tanstack/react-query";5 6function onAppStateChange(status: AppStateStatus) {7  if (Platform.OS !== "web") {8    focusManager.setFocused(status === "active");9  }10}11 12useEffect(() => {13  const subscription = AppState.addEventListener("change", onAppStateChange);14 15  return () => subscription.remove();16}, []);

基于屏幕焦点的重新获取

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

这个自定义的 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在挂载时也会调用我们的回调。