Создаем мобильное приложение на React Native. Часть 2: Системные запросы и API

Добываем местоположение пользователя

Устанавливаем react-native-geolocation-service

Настраиваем запрос геопозиции

import Geolocation from 'react-native-geolocation-service

Запрашиваем геопозицию

const [lat, setLat] = useState(0)
const [lon, setLon] = useState(0)

() => {}

let response = Geolocation.requestAuthorization('whenInUse').then(x => { if (x == 'granted') { } }

Geolocation.getCurrentPosition(position => { })

setLat(position.coords.latitude.toFixed(0))

setLon(position.coords.longtitude.toFixed(0))

Запрашиваем погоду по геолокации

Регистрируемся на openWeatherMap

Создаем точку доступа для общения с API

const [weatherData, setWeatherData] = useState(0)

const getWeather = async ( ) => { }

const weather = await fetch([указываем ссылку на API в обратных кавычках, в полях lat и lon оставляем ссылки на состояние приложения]&appid=[API-ключ])

const data = await weather.json()

setWeatherData(data.main.temp)

Настраиваем отображение погоды в интерфейсе

<Text style={{color: 'red', marginHorizontal: 'auto', fontSize: 40}}> </Text>

[какой-то текст] {weatherData.toFixed(0)}

Создаем отдельную функцию для запроса геопозиции и отображения погоды

<TouchableOpacity style={{borderWithin: 2, borderRadius: 10, padding: 5}} onPress={getLocationWeather}> </TouchableOpacity>

<Image style={{width: 20, height: 20}} source={require('./gps.png'} />

Запрашиваем погоду по выбранному городу

Настраиваем поле для поиска города

const [city, setCity] = useState('')

<Button>

title="get weather"

onPress={getWeatherInTheCity}

Настраиваем точку доступа к API

const getWeatherInTheCity = async () => { }

const geo = await fetch('https://api.openweathermap.org.geo/1.0/direct?q=${city}&limit=5&appid=[API-ключ]'

const data = await geo.json()

setLat(data[0].lat.toFixed(0))

getWeather()

Решаем оставшиеся проблемы с useEffect

Вместо заключения