安装react-native-location后报错，请求排查解决方法

我通过yarn add安装了react-native-location，按照官方文档使用时持续出现以下错误：

1. Could not find the RNLocation native module. Have you correctly linked react-native-location and rebuilt your app?
2. Invariant Violation: new NativeEventEmitter() requires a non-null argument.
3. Invariant Violation: "main" has not been registered. This can happen if:Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

我的使用代码如下：

import { Button, SafeAreaView, Text, View } from 'react-native'
import React, { useLayoutEffect, useState } from 'react'

import RNLocation from 'react-native-location';

RNLocation.configure({
//  distanceFilter: null
})
interface Props {
    navigation: any,
  };

const LocationNotification: React.FC<Props> = ({ navigation}) => {
    
const permissionHandle = async () => {

    console.log('here')


    let permission = await RNLocation.checkPermission({
        ios: "whenInUse",
        android: {
          detail: "coarse",
          rationale: {
            title: "We need to access your location",
            message: "We use your location to show where you are on the map",
            buttonPositive: "OK",
            buttonNegative: "Cancel"
          }
        }
    });
    console.log(permission)

}
return(
    <SafeAreaView>
    <View style={{marginTop: 10, padding: 10, borderRadius: 10, width: '40%'}}>
        <Button
        title="Get Location"
        />
    </View>
    <Text>Latitude: </Text>
    <Text>Longitude: </Text>
    <View style={{marginTop: 10, padding: 10, borderRadius: 10, width: '40%'}}>
        <Button
        title="Send Location"
        onPress={permissionHandle}
        />
      </View>
      </SafeAreaView>
)
}

export default LocationNotification;

我尝试过删除node_modules和yarn.lock文件重新安装，但问题仍未解决。请问是否需要使用Cocoapods才能让该插件正常工作？

关于Cocoapods的问题 #

是的，iOS端必须使用Cocoapods完成react-native-location的原生依赖集成——该库的iOS原生代码依赖Cocoapods管理，RN 0.60+版本的Android端会自动链接，但iOS端必须执行pod install步骤才能完成原生模块的集成。

分步解决所有错误 #

1. 修复原生模块未找到的问题

   • iOS操作：
     进入项目ios目录，执行pod install；关闭Xcode后重新打开项目的.xcworkspace文件（不要用.xcodeproj）；执行Product > Clean Build Folder清理缓存后重新编译运行。
   • Android操作：
     进入项目android目录，执行./gradlew clean；重启Android Studio后重新编译运行。
   • 通用操作：
     关闭当前Metro服务器，在项目根目录执行npx react-native start --reset-cache重启服务。

2. 修复NativeEventEmitter参数为空的问题
   该错误是原生模块未加载导致的连锁问题，解决第一个问题后通常会自动消失。如果仍出现，将全局作用域的RNLocation.configure()移到组件内部的生命周期钩子中：

   // 修改后的代码片段
   const LocationNotification: React.FC<Props> = ({ navigation}) => {
     useLayoutEffect(() => {
       RNLocation.configure({
         // distanceFilter: null
       });
     }, []);
     // 剩余代码不变
   }
   

3. 修复"main"未注册的问题
   这是前序模块加载错误导致的AppRegistry注册失败，解决前两个问题后会自动消失。若仍出现，检查：

   • Metro服务器是否在项目根目录启动，不要在子目录运行；
   • 项目的index.js/index.tsx文件是否存在AppRegistry.registerComponent('main', () => App);（或对应主组件的注册代码）。

额外检查项 #

• 确认react-native-location版本与你的React Native版本兼容（参考库的README版本支持说明）；
• Android端需在AndroidManifest.xml中添加权限声明：

  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  

• iOS端需在Info.plist中添加位置权限描述：

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>We need to access your location to show where you are on the map</string>
  

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