Не удается вернуть позицию из navigation.geolocation.getCurrentPosition () в реакции-нативной

Question

Я пытаюсь получить геолокацию после того, как изображение было снято в реактивном режиме. Пользователь захватывает изображение, и изображение вместе с геолокацией сохраняется в объекте и отправляется через http-запрос на сервер.

Функция сохранения получения геолокации работает нормально, но я не могу вернуть геолокацию, которая будет сохранена в объекте для http передачи. Я получаю неопределенное.

        console.log('getCoordinates run')
        await navigator.geolocation.getCurrentPosition(
            position => {
                let coordinates = `${position.coords.longitude}, 
                      ${position.coords.latitude}`

                return coordinates
            },
            error => Alert.alert(error.message),
            { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 }
        )

    }


captureImage = async () => {
        if (this.camera) {
            const options = { quality: 0.5, base64: true };
            const data = await this.camera.takePictureAsync(options);
            console.log(data);



            let postData = {
                user: 1,
                coordinates: this.getCoordinates(),
                image: `data:image/jpeg;base64${data.base64}`,
            }
            console.log(postData)

             axios.post('https://localhost:5000/api/posts', postData)
                 .then(post => res.json(post))
                 .catch(err => console.log(err))

        }
    }

Ожидаемые результаты состоят в том, что когда функция captureImage запускает функцию getCoordinates, в которой объект postData возвращает текущую геолокацию до того, как эти данные будут переданы на сервер.

Answer 1

Как работает функция geolocation.getCurrentPosition в том, что она устанавливает обратный вызов для отправки данных, как только она получает местоположение пользователя.Требуется время, чтобы получить и отправить соответствующие данные.Вот почему мы используем обратные вызовы или обещания.Но в вашем коде вы просто вызываете функцию и, не дожидаясь ее ответа, просто делаете вызов API.

Я предполагаю, что вы использовали функцию Async для этого.Но на вашем месте я бы попытался использовать Обещания, чтобы решить эту проблему.Простой пример:

captureImage = async () => {
    if (this.camera) {
        // ... do your camera tasks
    }

    this.sendImageData(data); // data is what you got from camera.
}

getGeoInfo = () => {
   return new Promise((resolve, reject) => {
       navigator.geolocation.getCurrentPosition(
        position => {
            let coordinates = `${position.coords.longitude}, 
                  ${position.coords.latitude}`

            resolve(coordinates);
        },
        error => reject(error),
        { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 }
      )
   })
}

sendImageData = (cameraData) => {
   let coordinates = '';
   getGeoInfo.then(crdnts => coordinates = crdnts );

   // now coordinates have all relevant data you wished.
   const data = { //... make the object as you want }
   // do the API call using axios as you've already done.
}