React Native 地理定位

17 Mar 2025 | 阅读 2 分钟

Geolocation API 用于获取某个位置的地理位置（纬度和经度）。它扩展了 Geolocation Web 规范。此 API 通过全局变量 navigator.geolocation 提供，因此我们无需导入它。

在 Android 中，Geolocation API 使用 android.location API。但是，Google 不推荐使用此 API，因为它不如推荐的 Google Location Services API 准确且速度慢。要在 React Native 中使用 Google Location Services API，请使用 *react-native-geolocation-service* 模块。

React Native 配置和权限

在本节中，我们将讨论使用 react-native init 或使用 expo init 或 Create React Native App 创建的项目。

iOS

对于 iOS 平台，我们在 Info.plist 中包含 NSLocationWhenInUseUsageDescription 键以启用地理定位。默认情况下，当使用 react-native init 创建项目时，会启用地理定位。

要在后台启用地理定位，我们需要在 Info.plist 中包含“NSLocationAlwaysUsageDescription”键。这需要在 Xcode 的“Capabilities”选项卡中将位置添加为后台模式。

Android

要在 Android 中访问位置，我们需要在 AndroidManifest.xml 文件中添加 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />。

Android API >=23 需要使用 PermissionsAndroid API 请求 ACCESS_FINE_LOCATION 权限。

地理定位的方法

方法	描述
getCurrentPosition()	它使用最新的位置信息调用成功回调一次。
watchPosition()	每当位置发生变化时，它都会调用成功回调。它返回一个 watchId（数字）。
clearWatch()	它清除 watchPosition() 的 watchId。
stopObserving()	它停止观察设备位置更改，并删除先前注册的所有侦听器。
setRNConfiguration()	它设置配置选项，这些选项用于所有位置请求。
requestAuthorization()	它根据 pList 上配置的密钥请求合适的位置权限。

React Native 地理定位示例

App.js

import React from 'react';
import { StyleSheet,Platform, Text, View } from 'react-native';

export default class App extends React.Component {
    constructor(){
        super();
        this.state = {
            ready: false,
            where: {lat:null, lng:null},
            error: null
        }
    }
    componentDidMount(){
        let geoOptions = {
            enableHighAccuracy:false,
            timeOut: 20000, //20 second
          //  maximumAge: 1000 //1 second
        };
        this.setState({ready:false, error: null });
        navigator.geolocation.getCurrentPosition( this.geoSuccess,
            this.geoFailure,
            geoOptions);
    }
    geoSuccess = (position) => {
        console.log(position.coords.latitude);

        this.setState({
            ready:true,
            where: {lat: position.coords.latitude,lng:position.coords.longitude }
        })
    }
    geoFailure = (err) => {
        this.setState({error: err.message});
    }
    render() {
        return (
            <View style={styles.container}>
                { !this.state.ready && (
                    <Text style={styles.big}>Using Geolocation in React Native.</Text>
                )}
                { this.state.error && (
                    <Text style={styles.big}>Error: {this.state.error}</Text>
                )}
                { this.state.ready && (
                    <Text style={styles.big}>
                        Latitude: {this.state.where.lat}
                        Longitude: {this.state.where.lng}
                    </Text>
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    },
    big: {
        fontSize: 25
    }
});

输出