0Pricing
React Academy · Aula

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-notifications

Solicitaçã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

  1. Componentes principais do React Native vs DOM da Web
  2. Estilização com a API StyleSheet e Flexbox
  3. Navegação com Expo Router
  4. Acessando APIs do dispositivo: câmera, localização e notificações push
← Voltar para React Academy