React Native报错：Undefined is not an object - Geolocation问题求助

嘿，我看你在给React Native应用加位置获取功能时遇到了崩溃，报错说undefined is not an object (evaluating '_reactNative.Geolocation.getCurrentPosition')，这问题我之前也碰到过，大概率是Geolocation的导入或者配置没搞对，我给你一步步理清楚怎么解决：

1. 先搞定Geolocation的正确导入 #

从React Native 0.60版本开始，官方自带的Geolocation模块被移到社区维护的包了，你再从react-native里导入肯定找不到。得这么做：

• 先安装社区的Geolocation包：

  npm install @react-native-community/geolocation --save
  # 用yarn的话就跑这个
  yarn add @react-native-community/geolocation
  

• 然后在代码里替换原来的导入语句：

  import Geolocation from '@react-native-community/geolocation';
  

2. 给Android加位置权限 #

你用的是Android 7.0设备，必须在AndroidManifest.xml里加权限，不然不仅会报错，还拿不到位置。打开android/app/src/main/AndroidManifest.xml，把这些权限加进去：

<!-- 获取粗略位置的权限 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 获取精确位置的权限 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- 如果需要后台定位的话，再加这个 -->
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

3. 运行时动态请求权限 #

Android 6.0以上要求运行时请求权限，不能只靠Manifest里的配置，所以你得在调用获取位置的方法前先请求权限：

import { PermissionsAndroid } from 'react-native';

// 先写个请求权限的异步函数
async function askForLocationPermission() {
  try {
    const permissionGranted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: "请求位置权限",
        message: "我们需要获取你的位置来显示经纬度信息",
        buttonNeutral: "以后再说",
        buttonNegative: "取消",
        buttonPositive: "允许"
      }
    );
    return permissionGranted === PermissionsAndroid.RESULTS.GRANTED;
  } catch (err) {
    console.warn(err);
    return false;
  }
}

// 然后修改你的按钮点击事件
handleGetLocation = async () => {
  const hasPermission = await askForLocationPermission();
  if (hasPermission) {
    Geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        // 这里可以把经纬度存到state里，然后在界面上显示
        this.setState({ latitude, longitude });
        console.log(`拿到位置啦：纬度${latitude}，经度${longitude}`);
      },
      (error) => {
        alert(`获取位置失败：${error.message}`);
        console.error(error);
      },
      // 配置项：开启高精度，超时20秒，缓存有效期1秒
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  } else {
    alert("需要允许位置权限才能获取你的位置哦");
  }
};

4. 重新编译运行 #

做完上面这些步骤后，记得重新编译你的Android应用：

npx react-native run-android

这样应该就能解决那个未定义的错误，正常获取并显示经纬度啦。

内容的提问来源于stack exchange，提问作者Phrosen