如何使用 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中文網其他相關文章！