Acessando APIs do dispositivo: câmera, localização e notificações push
Use módulos do Expo SDK para solicitar permissões e acessar recursos nativos do dispositivo.
Acessando APIs do dispositivo: câmera, localização e notificações push é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
Módulos do Expo SDK
O Expo SDK fornece APIs JavaScript para recursos nativos do dispositivo. Instale pacotes individuais e solicite permissões antes de acessar o hardware.
# Install what you need:
npx expo install expo-camera expo-location expo-notificationsSolicitação de permissões
Solicite sempre permissão antes de acessar recursos sensíveis do dispositivo. Verifique o resultado antes de prosseguir.
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);
}Acesso à câmera
Use expo-camera para exibir uma prévia da câmera e 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" />;
}Seletor de imagens
expo-image-picker permite que os usuários selecionem imagens do rolo da câmera sem exibir a interface da câmera.
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);
}
}Rastreamento de localização
Inscreva-se nas atualizações de localização com watchPositionAsync() para obter rastreamento em tempo real. Remova a inscrição quando o componente for desmontado.
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();
}, []);Geocodificação e geocodificação reversa
Converta coordenadas em endereços (geocodificação reversa) ou endereços em coordenadas (geocodificação) com expo-location.
const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);Configuração das notificações push
Use expo-notifications para se registrar para receber notificações push e obter um token push do 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
}Gerenciamento de notificações recebidas
Escute as notificações quando o aplicativo estiver em primeiro plano e os toques nas notificações.
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(); };
}, []);Notificações locais
Agende notificações locais (sem necessidade de servidor) com scheduleNotificationAsync.
await Notifications.scheduleNotificationAsync({
content: { title: 'Reminder', body: 'Check your app!', data: {} },
trigger: { seconds: 60 }, // fires after 60 seconds
});Localização em segundo plano
Para localização em segundo plano, use expo-task-manager e Location.startLocationUpdatesAsync. São necessárias permissões adicionais em app.json.
Verificação rápida
O que você deve sempre fazer antes de acessar a câmera ou a localização do dispositivo no Expo?
Recapitulação
Use os módulos do Expo SDK (expo-camera, expo-location, expo-notifications) para acessar o dispositivo. Solicite sempre as permissões primeiro, verifique o resultado e limpe as inscrições em useEffect. Registre-se para receber notificações push e envie o token push do Expo ao seu servidor.
Perguntas Frequentes
A aula “Acessando APIs do dispositivo: câmera, localização e notificações push” é grátis?
Sim — o texto completo de “Acessando APIs do dispositivo: câmera, localização e notificações push” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Acessando APIs do dispositivo: câmera, localização e notificações push”?
Use módulos do Expo SDK para solicitar permissões e acessar recursos nativos do dispositivo. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Acessando APIs do dispositivo: câmera, localização e notificações push”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Componentes principais do React Native vs DOM da Web
- Estilização com a API StyleSheet e Flexbox
- Navegação com Expo Router
- Acessando APIs do dispositivo: câmera, localização e notificações push