React Native 访问位置当前有效的解决方案是什么？

Question

我有一个几年前开始开发的 React Native 应用程序。我刚刚回到它，但无法让react-native-location-enabler 工作。如果它不是事件发射器警告，那么它是作为接口传递的类。啊 所有位置的东西以前都工作得很好，现在我已经尝试了很多东西，包括世博会，无论如何我真的不想使用。 根据我尝试过的研究，我认为它不适用于最新的反应版本。 我正在使用打字稿。 有人可以帮我找到一个在应用程序中访问、打开和使用手机位置的可行解决方案吗？

我已经尝试了我所知道的一切以及其他插件。

Answer 1

在 React Native 中访问和启用位置服务

如果您遇到

react-native-location-enabler

的问题，并且正在寻找可靠的解决方案来使用 TypeScript 在 React Native 应用程序中访问和启用位置服务，您可以利用

react-native-maps

和

react-native-permissions

来管理权限。

分步指南：

1. 安装所需的软件包：

   首先，确保您安装了必要的软件包。您可以通过运行来做到这一点：

   npm install react-native-maps react-native-permissions
   

   如果您不使用自动链接（React Native < 0.60):

   react-native link react-native-maps
   react-native link react-native-permissions
   

2. 设置权限：

   您需要在应用程序中配置位置访问权限。

   对于 iOS：

   • 打开

     Info.plist

     并添加以下键：

   <key>NSLocationWhenInUseUsageDescription</key>
   <string>We need your location to show nearby places.</string>
   <key>NSLocationAlwaysUsageDescription</key>
   <string>We need your location to provide better services.</string>
   

   对于安卓：

   • 在您的

     AndroidManifest.xml

     中，添加以下权限：

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

3. 请求位置权限：

   使用

   react-native-permissions

   请求组件中的位置权限。

   import React, { useEffect, useState } from 'react';
   import { View, Text, Button } from 'react-native';
   import MapView, { Marker } from 'react-native-maps';
   import { PermissionsAndroid, Platform } from 'react-native';
   
   const App = () => {
       const [locationGranted, setLocationGranted] = useState(false);
       const [region, setRegion] = useState({
           latitude: 37.78825,
           longitude: -122.4324,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421,
       });
   
       useEffect(() => {
           const requestLocationPermission = async () => {
               if (Platform.OS === 'android') {
                   const granted = await PermissionsAndroid.request(
                       PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                       {
                           title: "Location Permission",
                           message: "This app requires access to your location.",
                           buttonNeutral: "Ask Me Later",
                           buttonNegative: "Cancel",
                           buttonPositive: "OK"
                       }
                   );
                   setLocationGranted(granted === PermissionsAndroid.RESULTS.GRANTED);
               } else {
                   // For iOS, you can directly set locationGranted to true
                   setLocationGranted(true);
               }
           };
           requestLocationPermission();
       }, []);
   
       // Optionally add a method to get the user's current location
       const getCurrentLocation = () => {
           navigator.geolocation.getCurrentPosition(
               (position) => {
                   const { latitude, longitude } = position.coords;
                   setRegion({
                       latitude,
                       longitude,
                       latitudeDelta: 0.0922,
                       longitudeDelta: 0.0421,
                   });
               },
               (error) => console.log(error),
               { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
           );
       };
   
       return (
           <View style={{ flex: 1 }}>
               {locationGranted ? (
                   <MapView style={{ flex: 1 }} region={region}>
                       <Marker coordinate={region} />
                   </MapView>
               ) : (
                   <Text>Location permission denied</Text>
               )}
               <Button title="Get Current Location" onPress={getCurrentLocation} />
           </View>
       );
   };
   
   export default App;
   

要点：

• 权限：在尝试访问设备的位置之前始终请求位置权限。
• 处理位置： 授予权限后，使用

  navigator.geolocation.getCurrentPosition

  获取当前位置。
• 在物理设备上测试：请记住，位置服务可能无法在模拟器上正常工作；在真实设备上进行测试至关重要。

此方法利用

react-native-maps

来显示地图，并利用

react-native-permissions

来处理权限，从而提供了一种干净有效的方法来管理应用程序中的位置服务。

您可以根据您的应用程序的要求随意修改代码！

确保彻底测试您的实现，并检查官方文档以了解您正在使用的库的任何更新。祝您的项目顺利！

[react-native] [打字稿] [位置] [地理位置]