我有一个问题，我正在学习 React Native，我正在做一个应用程序

Question

我正在尝试动态获取当前位置以显示经度和纬度，消息错误表明存在问题，我包括

AppRegistry.registerComponent('GPSApp', () => App);

这一行，但错误仍然存在，所以我需要一些指南来解决此问题，感谢您的时间.

错误在这里

Android Bundled 6601ms node_modules/expo/AppEntry.js (670 modules)
 ERROR  Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNPermissions' could not be found. Verify that a module by this name is registered in the native binary.Bridgeless mode: false. TurboModule interop: false. Modules loaded: {"NativeModules":["PlatformConstants","LogBox","SourceCode","Timing","AppState","BlobModule","WebSocketModule","DevSettings","DevToolsSettingsManager","Networking","Appearance","DevLoadingView","HeadlessJsTaskSupport","DeviceInfo","UIManager","ImageLoader","SoundManager","IntentAndroid","DeviceEventManager","NativeAnimatedModule"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","RedBox","BugReporting","LinkingManager","NativeReactNativeFeatureFlagsCxx","RNPermissions"]}, js engine: hermes
 ERROR  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., js engine: hermes

我的代码：

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import MapView, { Region } from 'react-native-maps';
import { StatusBar } from 'react-native';
import Geolocation, { GeoCoordinates } from 'react-native-geolocation-service';
import Permissions, { PERMISSIONS } from 'react-native-permissions';
import { AppRegistry } from 'react-native';

const App: React.FC = () => {

  const [location, setLocation] = useState<GeoCoordinates | null>(null);


  useEffect(() => {
    const requestLocationPermission = async () => {
      try {
          const response = await Permissions.requestMultiple([PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION]);
    
          if (response[PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION] === 'granted') {
            Geolocation.getCurrentPosition((position) => {
              setLocation(position.coords);
            },  
            (error) => {console.log(error)}, 
            {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000})
          } else {
            console.error("Pemission denied");
            
          }
        

      } catch (err) {
        console.warn(err);
      }
    }

    requestLocationPermission();

  }, [])
 
  const initialRegion: Region = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };

  return (
    <View style={styles.container}>


      <StatusBar backgroundColor="transparent" barStyle="light-content" translucent={true} />
      <View style={styles.topBar}>
        <Text style={styles.title}>GPS App</Text>
      </View>


      {/* map */}
      <MapView 
        style={styles.map}
        initialRegion={initialRegion}
      >    
      </MapView>


      <View style={styles.bottomPanel}>
        <Text style={styles.panelText}>Latitude: {location?.latitude} </Text>
        <Text style={styles.panelText}>Longitude: {location?.longitude} </Text>
      </View>

      {/* float bottom */}
      <TouchableOpacity style={styles.fab} onPress={() => {}}>
        <Text style={styles.fabText}>+</Text>
      </TouchableOpacity>


    </View>
  )
}

export default App;


const styles = StyleSheet.create({

  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  topBar: {
    marginTop: StatusBar.currentHeight,
    paddingTop: 5,
    paddingBottom: 5,
    height: 70,
    backgroundColor: '#6200ee',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  title: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
  },
  bottomPanel: {
    height: 100,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1,
    borderColor: '#eaeaea',
  },
  panelText: {
    fontSize: 16,
  },
  fab: {
    position: 'absolute',
    bottom: 120,
    right: 20,
    backgroundColor: '#62000ee',
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fabText: {
    color: '#fff',
    fontSize: 24,
  }

});

我正在寻找解决方案，但有一些类似的案例，但没有适合我的案例的解决方案，我感谢您的帮助。

我的package.json：

{ “名称”：“gpsapp”， “版本”：“1.0.0”， "main": "expo/AppEntry.js", “脚本”：{ "start": "展会开始", "android": "博览会开始--android", "ios": "博览会开始--ios", "web": "博览会开始--web" }, “依赖项”：{ "世博会": "~51.0.28", "expo-status-bar": "~1.12.1", “反应”：“18.2.0”， “反应本机”：“0.74.5”， "react-native-geolocation-service": "^5.3.1", “反应本机地图”：“1.14.0”， “反应本机权限”：“^4.1.5” }, “开发依赖项”：{ "@babel/core": "^7.20.0", "@types/react": "~18.2.45", “打字稿”：“^5.1.3” }, “私人”：真实 }

Answer 1

我不确定这个库是否需要在 android/app/src/main/AndroidManifest.xml 上添加权限，但如果直到无法解决问题，我建议使用 @react-native-community/geolocation 代替