Question

所以这是我的问题，我现在正在使用一个本机应用程序，除了函数getLocation（）之外，所有代码都有效。它的工作原理是它返回纬度和经度，但由于某种原因，它需要太长时间，当我运行一个依赖于值的函数时，它不会在调用该函数时及时运行。有什么方法可以延迟函数，以便在getLocation（）函数返回时具有纬度和经度吗？

我做了一些先前的研究，这是另一个类似的堆栈溢出问题，但是他们使用了另一种获取位置的方法。 React native setting/accessing a variable inside a function

任何帮助将不胜感激！

import React, { Component } from 'react';
import { ActivityIndicator, ListView, Text, View, Picker } from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: null,
            key: "KEY NOT SHOWN BUT WORKS",
            latitude: null,
            longitude: null,
            error: 2
        };
    }


    /**
     * This function gets the current geo location of the device and stores it
     * as Lat and Long coordinates.
     * @private
     */
    getLocation(){
        navigator.geolocation.getCurrentPosition(
            (position) => {
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                });
            },
            (error) =>
                this.setState({ error: error.message, latitude: 41.77, longitude: -88.07,}),
            { enableHighAccuracy: false, timeout: 5000, maximumAge: 10000 },
        );
    }

    getAPI(){
        fetch('https://developer.cumtd.com/api/v2.2/JSON/getstopsbylatlon?key='+this.state.key+'&lat='+this.state.latitude.toString()+'&lon='+this.state.longitude.toString())
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    dataSource: responseJson.stops,
                    isLoading: false,
                }, function() {
                    // do something with new state
                });
            })
            .catch((error) => {
                //error
            });
    }

    componentDidMount() {
        this.getLocation();
        this.getAPI();
    }



    render() {
        if (this.state.isLoading) {
            return (
                <View style={{flex: 1, paddingTop: 20}}>
                    <ActivityIndicator />
                </View>
            );
        }
        return (
            <View style={{flex: 1, paddingTop: 20}}>
                <Text>Latitude: {this.state.latitude}</Text>
                <Text>Longitude: {this.state.longitude}</Text>
                <Picker
                    selectedValue={this.state.dataSource}>
                    {this.state.dataSource.map((item, key)=>(
                        <Picker.Item label={item.stop_name} value={item.stop_name} key={key}/>))}
                </Picker>
            </View>
        );
    }
}

Answer 1

Here is a snack with a proposed solution

在检索到位置后，只需将API调用移至getLocation()即可。当您集成权限处理时，您将希望转向更基于Promise的结构。

React Native Geolocation变量无法使用

1 个答案: