如何使用 React Query 设置 Expo React Native 项目

与外部 API 交互通常是必不可少的，React Query 允许您专注于数据而不是获取数据的复杂性，从而简化了这一点。本指南将引导您使用 Expo 设置 React Native 项目并将其与 React Query 集成。

第 1 步：设置您的世博项目

首先，安装 Expo CLI 并创建一个新项目。如果您已有项目，请跳至下一步。

• 安装 Expo CLI：

  npm install -g expo-cli

• 创建一个新项目：

  expo init my-react-native-query-app

根据您的需求选择模板。

第 2 步：安装 React 查询和依赖项

React Query 对于管理 React Native 应用程序中的服务器状态非常强大。

• 安装 React 查询：

  npm install @tanstack/react-query

• 安装附加依赖项：

  npx expo install @react-native-community/netinfo

第 3 步：创建辅助函数

在项目根目录的 hooks 文件夹中创建三个自定义挂钩。

1. useAppState.ts：

   import NetInfo from '@react-native-community/netinfo';
   import { onlineManager } from '@tanstack/react-query';

   onlineManager.setEventListener((setOnline) => {
     return NetInfo.addEventListener((state) => {
       setOnline(!!state.isConnected);
     });
   });

这会在应用程序重新连接到互联网时启用自动重新获取。

1. UseOnlineManager.ts：

   import { useEffect } from 'react';
   import { AppState, Platform } from 'react-native';
   import { focusManager } from '@tanstack/react-query';

   function onAppStateChange(status: AppStateStatus) {
     if (Platform.OS !== 'web') {
       focusManager.setFocused(status === 'active');
     }
   }

   useEffect(() => {
     const subscription = AppState.addEventListener('change', onAppStateChange);
     return () => subscription.remove();
   }, []);

这会在应用程序处于活动状态时更新应用程序状态。

1. useRefreshOnFocus.ts：

   import React from 'react';
   import { useFocusEffect } from '@react-navigation/native';

   export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
     const firstTimeRef = React.useRef(true);

     useFocusEffect(
       React.useCallback(() => {
         if (firstTimeRef.current) {
           firstTimeRef.current = false;
           return;
         }

         refetch();
       }, [refetch]),
     );
   }

当屏幕聚焦时，此自定义挂钩会触发重新获取。

第四步：实现根文件中的函数

在主路由文件中，设置以下内容：

import {
  QueryClient,
  QueryClientProvider,
  focusManager,
} from "@tanstack/react-query";
import { AppStateStatus, Platform } from "react-native";
import { useOnlineManager } from "@/hooks/query/useOnlineManager";
import { useAppState } from "@/hooks/query/useAppState";

export default function RootLayout() {
  function onAppStateChange(status: AppStateStatus) {
    if (Platform.OS !== "web") {
      focusManager.setFocused(status === "active");
    }
  }

  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: 2 } },
  });

  useOnlineManager();
  useAppState(onAppStateChange);

  return (
    <QueryClientProvider client={queryClient}>
      {Rest of your project}
    </QueryClientProvider>
  );
}

第 5 步：启动您的开发服务器

导航到您的项目目录并启动 Expo 开发服务器：

expo start

Expo 允许通过 Expo Go 应用程序或构建开发应用程序进行快速测试。有关创建开发版本的更多详细信息，请参阅 Expo 的文档。

结论

使用 React Query 设置 Expo React Native 项目可以简化状态管理和 API 交互。通过利用 React Query 的强大功能（例如缓存和后台更新），您可以更多地关注数据，而不是复杂的获取数据。

快乐编码！ ??‍？ ??‍？ ？

以上是如何使用 React Query 设置 Expo React Native 项目的详细内容。更多信息请关注PHP中文网其他相关文章！