Cara Menyediakan Projek Ekspo React Native dengan React Query

Berinteraksi dengan API luaran selalunya penting dan React Query memudahkan perkara ini dengan membenarkan anda memfokus pada data dan bukannya kerumitan mengambilnya. Panduan ini akan membimbing anda melalui penyediaan projek React Native menggunakan Expo dan menyepadukannya dengan React Query.

Langkah 1: Sediakan Projek Ekspo Anda

Untuk bermula, pasang Expo CLI dan buat projek baharu. Jika anda sudah mempunyai projek, langkau ke langkah seterusnya.

• Pasang Ekspo CLI:

  npm install -g expo-cli

• Buat Projek Baharu:

  expo init my-react-native-query-app

Pilih templat berdasarkan keperluan anda.

Langkah 2: Pasang React Query & Dependencies

React Query berkuasa untuk mengurus keadaan pelayan dalam apl React Native anda.

• Pasang Pertanyaan Reaksi:

  npm install @tanstack/react-query

• Pasang Ketergantungan Tambahan:

  npx expo install @react-native-community/netinfo

Langkah 3: Cipta Fungsi Pembantu

Buat tiga cangkuk tersuai dalam folder cangkuk di akar projek anda.

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);
     });
   });

Ini membolehkan auto-refetch apabila apl disambungkan semula ke Internet.

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();
   }, []);

Ini mengemas kini keadaan apl apabila apl aktif.

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]),
     );
   }

Kail tersuai ini mencetuskan pengambilan semula apabila skrin difokuskan.

Langkah 4: Laksanakan Fungsi dalam Fail Root Anda

Dalam fail laluan utama anda, sediakan yang berikut:

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>
  );
}

Langkah 5: Mulakan Pelayan Pembangunan Anda

Navigasi ke direktori projek anda dan mulakan pelayan pembangunan Ekspo:

expo start

Ekspo membenarkan ujian pantas melalui apl Expo Go atau dengan membina apl pembangunan. Untuk butiran lanjut tentang membuat binaan pembangunan, rujuk dokumentasi Ekspo.

Kesimpulan

Menyediakan projek Expo React Native dengan React Query memudahkan pengurusan keadaan dan interaksi API. Dengan memanfaatkan ciri berkuasa React Query, seperti pengemaskinian cache dan latar belakang, anda boleh lebih memfokuskan pada data anda dan kurang pada kerumitan mengambilnya.

Selamat Pengekodan! ??? ??? ?

Atas ialah kandungan terperinci Cara Menyediakan Projek Ekspo React Native dengan React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!