Доступ к API устройства: камера, местоположение и push-уведомления
Используйте модули Expo SDK для запроса разрешений и доступа к нативным возможностям устройства.
«Доступ к 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 — локальная установка не требуется.
Все уроки этого курса
- Основные компоненты React Native и веб-DOM
- Стилизация с API StyleSheet и Flexbox
- Навигация с Expo Router
- Доступ к API устройства: камера, местоположение и push-уведомления