Accesso alle API del dispositivo: fotocamera, posizione e notifiche push
Utilizzi i moduli Expo SDK per richiedere permessi e accedere alle funzionalità native del dispositivo.
Accesso alle API del dispositivo: fotocamera, posizione e notifiche push è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Moduli dell'SDK Expo
L'SDK Expo fornisce API JavaScript per le funzionalità native del dispositivo. Installi i singoli pacchetti e richieda le autorizzazioni prima di accedere all'hardware.
# Install what you need:
npx expo install expo-camera expo-location expo-notificationsRichiesta delle autorizzazioni
Richieda sempre l'autorizzazione prima di accedere alle funzionalità sensibili del dispositivo. Controlli il risultato prima di procedere.
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);
}Accesso alla fotocamera
Utilizzi expo-camera per visualizzare un'anteprima della fotocamera e scattare foto.
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" />;
}Selettore di immagini
expo-image-picker consente agli utenti di selezionare immagini dal rullino fotografico senza mostrare l'interfaccia della fotocamera.
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);
}
}Tracciamento della posizione
Si iscriva agli aggiornamenti della posizione con watchPositionAsync() per il tracciamento in tempo reale. Rimuova la sottoscrizione al momento dello smontaggio del componente.
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();
}, []);Geocoding e reverse geocoding
Converta le coordinate in indirizzi (reverse geocoding) oppure gli indirizzi in coordinate (geocoding) con expo-location.
const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);Configurazione delle notifiche push
Utilizzi expo-notifications per registrarsi alle notifiche push e ottenere un token push Expo.
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
}Gestione delle notifiche in arrivo
Ascolti le notifiche quando l'app è in primo piano e rilevi i tocchi sulle notifiche.
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(); };
}, []);Notifiche locali
Pianifichi notifiche locali (senza bisogno di un server) con scheduleNotificationAsync.
await Notifications.scheduleNotificationAsync({
content: { title: 'Reminder', body: 'Check your app!', data: {} },
trigger: { seconds: 60 }, // fires after 60 seconds
});Posizione in background
Per la posizione in background, utilizzi expo-task-manager e Location.startLocationUpdatesAsync. Sono necessarie autorizzazioni aggiuntive in app.json.
Verifica rapida
Che cosa deve fare sempre prima di accedere alla fotocamera o alla posizione del dispositivo in Expo?
Riepilogo
Utilizzi i moduli dell'SDK Expo (expo-camera, expo-location, expo-notifications) per accedere al dispositivo. Richieda sempre prima le autorizzazioni, controlli il risultato e rimuova le sottoscrizioni in useEffect. Si registri alle notifiche push e invii il token push Expo al backend.
Domande Frequenti
La lezione «Accesso alle API del dispositivo: fotocamera, posizione e notifiche push» è gratuita?
Sì — il testo completo di «Accesso alle API del dispositivo: fotocamera, posizione e notifiche push» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Accesso alle API del dispositivo: fotocamera, posizione e notifiche push»?
Utilizzi i moduli Expo SDK per richiedere permessi e accedere alle funzionalità native del dispositivo. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Accesso alle API del dispositivo: fotocamera, posizione e notifiche push»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Componenti core di React Native e DOM web a confronto
- Styling con API StyleSheet e Flexbox
- Navigazione con Expo Router
- Accesso alle API del dispositivo: fotocamera, posizione e notifiche push