Как получить местоположение только после нажатия кнопки в ReactNative

Question

Я новичок в React Native. Я пытаюсь получить геолокацию пользователя, когда пользователь нажимает кнопку. Код как ниже:

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

class TestScreen extends Component {
    constructor(props) {
        super(props);

        this.state = {
            latitude: null,
            longitude: null,
            error: null,
        };
    }


    getLocation() {

        navigator.geolocation.getCurrentPosition(
            (position) => {
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    error: null,
                });
            },
            (error) => this.setState({ error: error.message }),
            { enableHighAccuracy: true, timeout: 20000},
        );
    }

    render() {
        return (
            <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button onPress={this.getLocation()} title="Get Location"/>        
            <Text>Latitude: {this.state.latitude}</Text>
            <Text>Longitude: {this.state.longitude}</Text>
            {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
            </View>
        );
    }
}
export default TestScreen;

Когда экран загружен, геолокация немедленно выводится на экран. Я бы хотел, чтобы пользователь мог нажать кнопку и только после этого выводить геолокацию. Во-вторых, я видел много реализаций использования геолокации componentDidMount, нужно ли мне использовать это в этом сценарии?

Спасибо

Answer 1

СТАРЫЙ код

<Button onPress={this.getLocation()} title="Get Location"/>

новые изменения:

<Button onPress={()=>this.getLocation()} title="Get Location"/>

для текущего местоположения ваше решение выглядит следующим образом, оно работает для меня.

_this.watchID = navigator.geolocation.watchPosition((position) => {
            console.log(TAG + "position : " + JSON.stringify(position));
            var gps_location = position.coords.latitude + "," + position.coords.longitude;
            console.log(TAG + "gps_location : " + JSON.stringify(gps_location));
          }, error => {
            console.log(TAG + " error in getting location " + error);            
          }, {
              enableHighAccuracy: false, timeout: 20000, maximumAge: 1000
            });