Смартфоны — это не только экран и кнопки, но и мощные сенсоры, камеры и геолокационные модули. React Native позволяет взаимодействовать с этими нативными функциями, делая приложения ещё более интерактивными. В этой статье мы разберём:

• Как запрашивать разрешения.
• Как работать с камерой.
• Как получить координаты устройства.

На практике создадим приложение для фотогалереи, где снимки будут сохраняться вместе с геолокацией.

Теория: доступ к нативным функциям устройства

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

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

React Native предлагает библиотеку react-native-permissions для работы с разрешениями.

Установка:

npm install react-native-permissions
npm install @react-native-community/geolocation react-native-image-picker

⚠️ В Expo используйте встроенные модули expo-permissions, expo-image-picker и expo-location.

Работа с камерой

Камера — одна из самых популярных функций. В React Native камера реализуется с помощью библиотек, например:

• react-native-image-picker (для съёмки и выбора изображений из галереи).
• react-native-camera (для продвинутой работы с камерой).

Работа с геолокацией

Геолокация позволяет узнать местоположение устройства с помощью GPS, Wi-Fi или мобильной сети. Для этого используйте:

• Встроенный Geolocation из React Native.
• expo-location (для приложений, созданных в Expo).

Практика: приложение для фотогалереи с координатами

Давайте создадим приложение, которое:

• Позволяет сделать снимок.
• Сохраняет снимок и координаты устройства.
• Отображает список сделанных снимков с их местоположением.

Шаг 1: Установка зависимостей

Установим необходимые библиотеки:

npm install react-native-image-picker @react-native-community/geolocation

Если используете Expo, установите:

expo install expo-image-picker expo-location

Шаг 2: Запрос разрешений

Добавим логику для проверки разрешений.

import { PermissionsAndroid, Platform } from 'react-native';

// Функция для запроса разрешений
export const requestPermissions = async () => {
  if (Platform.OS === 'android') {
    try {
      const granted = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.CAMERA,
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      ]);

      return (
        granted['android.permission.CAMERA'] === PermissionsAndroid.RESULTS.GRANTED &&
        granted['android.permission.ACCESS_FINE_LOCATION'] === PermissionsAndroid.RESULTS.GRANTED
      );
    } catch (err) {
      console.warn(err);
      return false;
    }
  }

  // Для iOS разрешения запрашиваются автоматически
  return true;
};

Шаг 3: Интерфейс приложения

Создадим базовый интерфейс приложения в App.js.

import React, { useState } from 'react';
import {
  View,
  Text,
  Button,
  Image,
  FlatList,
  StyleSheet,
  Alert,
} from 'react-native';
import { launchCamera } from 'react-native-image-picker';
import Geolocation from '@react-native-community/geolocation';
import { requestPermissions } from './permissions';

const App = () => {
  const [photos, setPhotos] = useState([]); // Список фотографий

  // Функция для получения координат
  const getCoordinates = () => {
    return new Promise((resolve, reject) => {
      Geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords;
          resolve({ latitude, longitude });
        },
        (error) => reject(error),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
      );
    });
  };

  // Функция для съёмки фото
  const takePhoto = async () => {
    const hasPermission = await requestPermissions();

    if (!hasPermission) {
      Alert.alert('Ошибка', 'Не удалось получить разрешения');
      return;
    }

    // Запуск камеры
    launchCamera({ mediaType: 'photo', saveToPhotos: true }, async (response) => {
      if (response.didCancel) {
        console.log('Пользователь отменил съемку');
      } else if (response.errorCode) {
        console.log('Ошибка камеры:', response.errorMessage);
      } else {
        const coordinates = await getCoordinates(); // Получаем координаты
        const newPhoto = {
          uri: response.assets[0].uri,
          latitude: coordinates.latitude,
          longitude: coordinates.longitude,
        };
        setPhotos((prev) => [...prev, newPhoto]); // Добавляем фото в список
      }
    });
  };

  return (
    
      <button title="Сделать фото"></button>
      {photos.length > 0 ? (
         index.toString()}
          renderItem={({ item }) => (
            
              
              Широта: {item.latitude}
              Долгота: {item.longitude}
            
          )}
        />
      ) : (
        Пока нет фото
      )}
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  photoContainer: {
    marginBottom: 20,
    alignItems: 'center',
  },
  photo: {
    width: 200,
    height: 200,
    borderRadius: 10,
    marginBottom: 10,
  },
  text: {
    marginTop: 20,
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
  },
});

export default App;

Как это работает?

• Разрешения: Перед использованием камеры и геолокации мы запрашиваем разрешения через requestPermissions.
• Камера: Для съёмки фото используется launchCamera из react-native-image-picker.
• Геолокация: Получаем координаты через Geolocation.getCurrentPosition.
• Отображение данных: Снимки и координаты сохраняются в массиве photos и отображаются с помощью FlatList.

Дальнейшие улучшения

• Сохранение данных: Сохраните фото и координаты в локальное хранилище с помощью AsyncStorage.
• Карта: Отобразите фото на карте с помощью библиотеки react-native-maps.
• Редактирование фото: Добавьте возможность удалять или редактировать снимки.