React Academy · Урок

Доступ к API устройства: камера, местоположение и push-уведомления

Используйте модули Expo SDK для запроса разрешений и доступа к нативным возможностям устройства.

Урок 4 из 412 шагов

«Доступ к API устройства: камера, местоположение и push-уведомления» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Модули Expo SDK

Expo SDK предоставляет JavaScript API для нативных возможностей устройства. Устанавливайте отдельные пакеты и запрашивайте разрешения перед обращением к оборудованию.

# Install what you need:
npx expo install expo-camera expo-location expo-notifications

Запрос разрешений

Всегда запрашивайте разрешение перед обращением к чувствительным функциям устройства. Прежде чем продолжить, проверьте результат.

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);
}

Доступ к камере

Используйте expo-camera, чтобы отображать предварительный просмотр с камеры и делать фотографии.

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" />;
}

Выбор изображения

expo-image-picker позволяет пользователям выбирать изображения из галереи, не показывая интерфейс камеры.

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);
  }
}

Отслеживание местоположения

Подпишитесь на обновления местоположения с помощью watchPositionAsync() для отслеживания в реальном времени. При размонтировании удалите подписку.

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();
}, []);

Геокодирование и обратное геокодирование

Преобразуйте координаты в адреса (обратное геокодирование) или адреса в координаты (геокодирование) с помощью expo-location.

const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);

Настройка push-уведомлений

Используйте expo-notifications, чтобы зарегистрироваться для получения push-уведомлений и получить 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
}

Обработка входящих уведомлений

Отслеживайте уведомления, когда приложение находится на переднем плане, а также нажатия на уведомления.

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(); };
}, []);

Локальные уведомления

Планируйте локальные уведомления (сервер не требуется) с помощью scheduleNotificationAsync.

await Notifications.scheduleNotificationAsync({
  content: { title: 'Reminder', body: 'Check your app!', data: {} },
  trigger: { seconds: 60 }, // fires after 60 seconds
});

Местоположение в фоновом режиме

Для отслеживания местоположения в фоновом режиме используйте expo-task-manager и Location.startLocationUpdatesAsync. В app.json потребуются дополнительные разрешения.

Проверка знаний

Что всегда необходимо сделать перед обращением к камере или местоположению устройства в Expo?

Итоги

Используйте модули Expo SDK (expo-camera, expo-location, expo-notifications) для доступа к устройству. Сначала всегда запрашивайте разрешения, проверяйте результат и очищайте подписки в useEffect. Зарегистрируйтесь для получения push-уведомлений и отправьте Expo push-токен на свою серверную часть.

Можно начать бесплатно

Изучай React с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
88
Уроки
324

Часто задаваемые вопросы

Урок «Доступ к API устройства: камера, местоположение и push-уведомления» бесплатный?

Да — полный текст урока «Доступ к API устройства: камера, местоположение и push-уведомления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Доступ к API устройства: камера, местоположение и push-уведомления»?

Используйте модули Expo SDK для запроса разрешений и доступа к нативным возможностям устройства. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Доступ к API устройства: камера, местоположение и push-уведомления»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основные компоненты React Native и веб-DOM
  2. Стилизация с API StyleSheet и Flexbox
  3. Навигация с Expo Router
  4. Доступ к API устройства: камера, местоположение и push-уведомления
← Назад к React Academy