0Pricing
React Academy · Lekcja

Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push

Używanie modułów Expo SDK do żądania uprawnień i uzyskiwania dostępu do natywnych funkcji urządzenia.

Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Moduły Expo SDK

Expo SDK udostępnia interfejsy API JavaScript umożliwiające korzystanie z natywnych funkcji urządzenia. Poszczególne pakiety należy instalować osobno, a przed uzyskaniem dostępu do sprzętu trzeba poprosić o odpowiednie uprawnienia.

# Install what you need:
npx expo install expo-camera expo-location expo-notifications

Żądanie uprawnień

Przed uzyskaniem dostępu do wrażliwych funkcji urządzenia zawsze należy poprosić o uprawnienia. Przed kontynuowaniem trzeba sprawdzić wynik tej operacji.

import * as Location from 'expo-location';

async function getLocation() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Permission denied');
    return;
  }
  const location = await Location.getCurrentPositionAsync({});
  console.log(location.coords);
}

Dostęp do aparatu

Proszę użyć expo-camera, aby wyświetlić podgląd aparatu i robić zdjęcia.

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useRef } from 'react';

export function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const cameraRef = useRef(null);

  if (!permission?.granted) {
    return <Button onPress={requestPermission} title="Grant camera" />;
  }

  const takePicture = async () => {
    const photo = await cameraRef.current?.takePictureAsync();
    console.log(photo?.uri);
  };

  return <CameraView ref={cameraRef} facing="back" />;
}

Selektor obrazów

expo-image-picker umożliwia użytkownikom wybieranie obrazów z galerii aparatu bez wyświetlania interfejsu aparatu.

import * as ImagePicker from 'expo-image-picker';

async function pickImage() {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    quality: 0.8,
    allowsEditing: true,
    aspect: [4, 3],
  });

  if (!result.canceled) {
    console.log(result.assets[0].uri);
  }
}

Śledzenie lokalizacji

Proszę subskrybować aktualizacje lokalizacji za pomocą watchPositionAsync(), aby śledzić położenie w czasie rzeczywistym. Po odmontowaniu komponentu należy usunąć subskrypcję.

useEffect(() => {
  let subscription;
  (async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') return;
    subscription = await Location.watchPositionAsync(
      { accuracy: Location.Accuracy.High, distanceInterval: 10 },
      location => setCoords(location.coords)
    );
  })();
  return () => subscription?.remove();
}, []);

Geokodowanie i odwrotne geokodowanie

Za pomocą expo-location można konwertować współrzędne na adresy (odwrotne geokodowanie) lub adresy na współrzędne (geokodowanie).

const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);

Konfiguracja powiadomień push

Proszę użyć expo-notifications, aby zarejestrować aplikację do odbierania powiadomień push i uzyskać token Expo push.

import * as Notifications from 'expo-notifications';

async function registerForPushNotifications() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') return null;
  const token = (await Notifications.getExpoPushTokenAsync()).data;
  return token; // send this to your server
}

Obsługa przychodzących powiadomień

Należy nasłuchiwać powiadomień, gdy aplikacja działa na pierwszym planie, oraz reakcji na dotknięcia powiadomień.

useEffect(() => {
  const receivedSub = Notifications.addNotificationReceivedListener(notification => {
    console.log('Received:', notification);
  });
  const responseSub = Notifications.addNotificationResponseReceivedListener(response => {
    const data = response.notification.request.content.data;
    router.push(`/post/${data.postId}`);
  });
  return () => { receivedSub.remove(); responseSub.remove(); };
}, []);

Powiadomienia lokalne

Powiadomienia lokalne (niewymagające serwera) można planować za pomocą scheduleNotificationAsync.

await Notifications.scheduleNotificationAsync({
  content: { title: 'Reminder', body: 'Check your app!', data: {} },
  trigger: { seconds: 60 }, // fires after 60 seconds
});

Lokalizacja w tle

W przypadku lokalizacji w tle należy użyć expo-task-manager oraz Location.startLocationUpdatesAsync. Wymaga to dodatkowych uprawnień w pliku app.json.

Szybkie sprawdzenie

Co należy zawsze zrobić przed uzyskaniem dostępu do aparatu lub lokalizacji urządzenia w Expo?

Podsumowanie

Do uzyskiwania dostępu do urządzenia należy używać modułów Expo SDK (expo-camera, expo-location, expo-notifications). Zawsze najpierw trzeba poprosić o uprawnienia, sprawdzić wynik i posprzątać subskrypcje w useEffect. Należy zarejestrować aplikację do odbierania powiadomień push i wysłać token Expo push do backendu.

Często zadawane pytania

Czy lekcja „Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push” jest bezpłatna?

Tak — pełny tekst „Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push”?

Używanie modułów Expo SDK do żądania uprawnień i uzyskiwania dostępu do natywnych funkcji urządzenia. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podstawowe komponenty React Native a DOM w przeglądarce
  2. Stylowanie za pomocą API StyleSheet i Flexbox
  3. Nawigacja z Expo Router
  4. Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push
← Powrót do React Academy