Доступ к GPS-локации с использованием React Native
Что ж, давно, я снова вернулся с очередным постом. Я начал учиться реагировать на родной язык два месяца назад. И поверьте мне, по сравнению с Java для Android, React Native использует гораздо более простой подход для написания кода. React native - это платформа для разработки кроссплатформенных нативных приложений, которые работают как на Android, так и на iOS с использованием реакции и JavaScript. Прежде чем двигаться дальше, я надеюсь, что у вас есть базовые знания об этой структуре. Если так, то все готово. Итак, приступим.
В этом блоге я расскажу, как получить доступ к местоположению устройства с помощью собственных API-интерфейсов React.
Во-первых, в VS Code создайте новое приложение. Я использую следующую команду для запуска своего проекта:
разрешение на выполнение для запуска init-native
Я создал новую папку с именем src в корневом местоположении и создал файл App.js внутри папки src, удалив App.js из корневого местоположения. Измените расположение компонента App в файле index.js. Помните: index.js - это точка входа в любое приложение.
Теперь наш основной код находится в App.js. Я не создаю отдельные файлы js для разрешения местоположения во время выполнения. Вы можете это сделать, если хотите.
В файле манифеста укажите разрешения для местоположений:
‹Использует-разрешение android: name =” android.permission.ACCESS_FINE_LOCATION ”/›
‹Использует-разрешение android: name =” android.permission.ACCESS_COARSE_LOCATION ”/›
Теперь мы находимся внутри нашего компонента приложения.
Этот компонент будет отображать простой JSX. Я создал объект состояния, содержащий ключ как locationStatus, ему присваивается начальное значение «denied», так как при первой загрузке приложение не имеет доступа к местоположению устройства. В нашем методе рендеринга мы просто отображаем locationStatus с помощью объекта состояния.
Существует API, доступный в пакете response-native, который называется PermissionsAndroid. Этот API используется для запроса у пользователя разрешений во время выполнения для доступа к определенным вещам, таким как местоположение, контакты, камера и т. Д. На устройствах до версии 23 Android SDK не было необходимости в разрешениях во время выполнения, если разрешения упомянутый в файле манифеста, что, очевидно, опасно для пользователя, который может потерять важную информацию в результате кражи.
Теперь в файле App.js импортируйте PermissionsAndroid из пакета response-native:
импортировать {PermissionsAndroid} из "react-native";
Теперь напишите асинхронную функцию для запроса разрешения на определение местоположения.
async checkLocationPermission () {
попробуйте {
предоставлено const = await PermissionsAndroid.request (PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
if (предоставлено === PermissionsAndroid.RESULTS.GRANTED) {
this.setState ({locationStatus: ’grant’})
} else {
console.log («Permission denied»)
}
}
поймать (ошибка) {
console.warn («Произошла ошибка при запросе разрешения на определение местоположения»);
}
}
Вызовите эту функцию из функции componentDidMount ().
async componentDidMount () {
await this.checkLocationPermission ();
}
Теперь эта функция будет вызываться асинхронно и ждет ответа от пользователя после того, как запрос был сделан. Когда доступ разрешен, он устанавливает locationStatus как предоставленный, а когда состояние изменяется, компонент выполняет повторный рендеринг, и новое состояние отображается на устройстве.
Ниже приведен полный код:
Ура! На этом мы закончили, надеюсь, вам понравился блог.
Для получения дополнительной информации о PermissionsAndroid API вы можете обратиться к официальной документации по реагированию на собственный код Facebook: https://facebook.github.io/react-native/docs/permissionsandroid
Ребята, не стесняйтесь комментировать, если у вас возникнут вопросы, и не забывайте делиться. Увидимся в следующий раз. Наслаждайтесь кодированием! :)
