Acceder a las API del dispositivo: cámara, ubicación y notificaciones push
Utilice módulos del SDK de Expo para solicitar permisos y acceder a las capacidades nativas del dispositivo.
Acceder a las API del dispositivo: cámara, ubicación y notificaciones push es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
Módulos del SDK de Expo
El SDK de Expo proporciona API de JavaScript para acceder a las capacidades nativas del dispositivo. Instale los paquetes individuales y solicite permisos antes de acceder al hardware.
# Install what you need:
npx expo install expo-camera expo-location expo-notificationsSolicitud de permisos
Solicite siempre permiso antes de acceder a funciones sensibles del dispositivo. Compruebe el resultado antes de continuar.
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);
}Acceso a la cámara
Utilice expo-camera para mostrar una vista previa de la cámara y capturar fotos.
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" />;
}Selector de imágenes
expo-image-picker permite a los usuarios seleccionar imágenes de su galería sin mostrar la interfaz de la cámara.
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);
}
}Seguimiento de ubicación
Suscríbase a las actualizaciones de ubicación con watchPositionAsync() para realizar un seguimiento en tiempo real. Elimine la suscripción al desmontar el 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();
}, []);Geocodificación y geocodificación inversa
Convierta coordenadas en direcciones (geocodificación inversa) o direcciones en coordenadas (geocodificación) con expo-location.
const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);Configuración de las notificaciones push
Utilice expo-notifications para registrarse en las notificaciones push y obtener un token push de 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
}Gestión de notificaciones entrantes
Escuche las notificaciones cuando la aplicación esté en primer plano y las pulsaciones en las notificaciones.
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(); };
}, []);Notificaciones locales
Programe notificaciones locales (sin necesidad de servidor) con scheduleNotificationAsync.
await Notifications.scheduleNotificationAsync({
content: { title: 'Reminder', body: 'Check your app!', data: {} },
trigger: { seconds: 60 }, // fires after 60 seconds
});Ubicación en segundo plano
Para obtener la ubicación en segundo plano, utilice expo-task-manager y Location.startLocationUpdatesAsync. Se requieren permisos adicionales en app.json.
Comprobación rápida
¿Qué debe hacer siempre antes de acceder a la cámara o a la ubicación del dispositivo en Expo?
Repaso
Utilice los módulos del SDK de Expo (expo-camera, expo-location, expo-notifications) para acceder al dispositivo. Solicite siempre primero los permisos, compruebe el resultado y cancele las suscripciones en useEffect. Regístrese para recibir notificaciones push y envíe el token push de Expo a su backend.
Aprende React con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 88
- Lecciones
- 324
Preguntas frecuentes
¿La lección «Acceder a las API del dispositivo: cámara, ubicación y notificaciones push» es gratis?
Sí — el texto completo de «Acceder a las API del dispositivo: cámara, ubicación y notificaciones push» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Acceder a las API del dispositivo: cámara, ubicación y notificaciones push»?
Utilice módulos del SDK de Expo para solicitar permisos y acceder a las capacidades nativas del dispositivo. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Acceder a las API del dispositivo: cámara, ubicación y notificaciones push»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Componentes principales de React Native frente al DOM web
- Estilos con la API StyleSheet y Flexbox
- Navegación con Expo Router
- Acceder a las API del dispositivo: cámara, ubicación y notificaciones push