Rumah > hujung hadapan web > tutorial js > Cara Menyediakan Projek Ekspo React Native dengan React Query

Cara Menyediakan Projek Ekspo React Native dengan React Query

PHPz
Lepaskan: 2024-09-01 21:03:02
asal
603 orang telah melayarinya

How to Set Up an Expo React Native Project with 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
Salin selepas log masuk
  • Buat Projek Baharu:
  expo init my-react-native-query-app
Salin selepas log masuk

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
Salin selepas log masuk
  • Pasang Ketergantungan Tambahan:
  npx expo install @react-native-community/netinfo
Salin selepas log masuk

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);
     });
   });
Salin selepas log masuk

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();
   }, []);
Salin selepas log masuk

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]),
     );
   }
Salin selepas log masuk

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>
  );
}
Salin selepas log masuk

Langkah 5: Mulakan Pelayan Pembangunan Anda

Navigasi ke direktori projek anda dan mulakan pelayan pembangunan Ekspo:

expo start
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan