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.
Untuk bermula, pasang Expo CLI dan buat projek baharu. Jika anda sudah mempunyai projek, langkau ke langkah seterusnya.
npm install -g expo-cli
expo init my-react-native-query-app
Pilih templat berdasarkan keperluan anda.
React Query berkuasa untuk mengurus keadaan pelayan dalam apl React Native anda.
npm install @tanstack/react-query
npx expo install @react-native-community/netinfo
Buat tiga cangkuk tersuai dalam folder cangkuk di akar projek anda.
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.
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.
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.
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> ); }
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.
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!