使用react-native-geolocation-service遇RCTRawText错误及定位超时求助

Hey there, let's break down the issues you're facing with react-native-geolocation-service and that pesky RCTRawText error. We'll start with the most critical problem first, then tackle the timeout issue.

先解决RCTRawText错误（核心根源） #

This error almost always happens when basic React Native component packages aren't registered properly or there's a JSX syntax mistake. Let's fix this step by step:

1. Don't remove MainReactPackage from MainActivity
   Looking at your MainActivity code, you commented out new MainReactPackage()! This package registers all core React Native components like <Text> and <View>—without it, the app has no idea how to render those elements, hence the RCTRawText error. Here's the corrected code:

   import com.agontuk.RNFusedLocation.RNFusedLocationPackage;
   
   @Override
   protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(), // Keep this line—it's non-negotiable!
           new RNFusedLocationPackage()
       );
   }
   

2. Fix App.js's missing imports and undefined variables
   Your App.js has two big issues that are breaking functionality:

   • You didn't import the Geolocation module from the library
   • The hasLocationPermission variable is undefined (you can't check a variable that doesn't exist)
   • The compressed one-line code makes it easy to miss syntax errors

   Here's a cleaned-up, functional version with proper permission handling:

   import React, { Component } from 'react';
   import { View, Text, PermissionsAndroid } from 'react-native';
   import Geolocation from 'react-native-geolocation-service'; // Critical import!
   
   class GeolocationExample extends Component {
       constructor(props) {
           super(props);
           this.state = {
               latitude: null,
               longitude: null,
               error: null,
           };
       }
   
       async componentDidMount() {
           // First, ask for location permission
           const hasPermission = await this.requestLocationPermission();
           if (hasPermission) {
               Geolocation.getCurrentPosition(
                   (position) => {
                       this.setState({
                           latitude: position.coords.latitude,
                           longitude: position.coords.longitude,
                           error: null,
                       });
                       console.log(position);
                   },
                   (error) => {
                       this.setState({ error: error.message });
                       console.log(error.code, error.message);
                   },
                   { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
               );
           } else {
               this.setState({ error: 'Location permission denied' });
           }
       }
   
       async requestLocationPermission() {
           try {
               const granted = await PermissionsAndroid.request(
                   PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                   {
                       title: 'Location Permission Request',
                       message: 'We need access to your location to use this feature',
                       buttonNeutral: 'Ask Later',
                       buttonNegative: 'Cancel',
                       buttonPositive: 'Allow',
                   }
               );
               return granted === PermissionsAndroid.RESULTS.GRANTED;
           } catch (err) {
               console.warn(err);
               return false;
           }
       }
   
       render() {
           return (
               <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
                   <Text>Latitude: {this.state.latitude}</Text>
                   <Text>Longitude: {this.state.longitude}</Text>
                   {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
               </View>
           );
       }
   }
   
   export default GeolocationExample;
   

Fixing the Location Timeout Issue #

Once you've fixed the RCTRawText error, let's tackle the timeout problem:

1. Update Google Play Services Version
   The 12.2.21 version you're using is extremely outdated and likely incompatible with modern React Native versions. Upgrade to a stable, recent version, and use implementation instead of the deprecated compile keyword:

   implementation(project(':react-native-geolocation-service')) {
       exclude group: 'com.google.android.gms', module: 'play-services-location'
   }
   implementation 'com.google.android.gms:play-services-location:17.1.0' // Use a newer stable version
   

   Note: If you're using other Google services (like Maps), make sure all their versions match to avoid dependency conflicts.

2. Check Device/Emulator Settings

   • Ensure your device's GPS is turned on (use High Accuracy mode for best results)
   • Verify the app has location permissions enabled in your device's system settings
   • For emulators: Manually set a mock location in Android Studio's Extended Controls panel

3. Adjust Location Parameters
   If timeouts persist, try:

   • Setting enableHighAccuracy to false first (test if network-based location works)
   • Extending the timeout value to 30000 (30 seconds) to give the system more time to get a fix

Final Step: Clean and Rebuild #

After making all these changes, don't forget to clear caches and rebuild to ensure all updates take effect:

• Clear Android build cache: cd android && ./gradlew clean
• Restart Metro with cache reset: Close your current Metro server, then run npx react-native start --reset-cache
• Re-run the app: npx react-native run-android

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