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
- Podstawowe komponenty React Native a DOM w przeglądarce
- Stylowanie za pomocą API StyleSheet i Flexbox
- Nawigacja z Expo Router
- Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push