React-Native的navigator.geolocation未定义

Question

console.log(navigator.geolocation) //undefined

console.log(navigator)：

WorkerNavigator {hardwareConcurrency: 8, appCodeName: "Mozilla", appName: "Netscape", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKi…L, like Gecko) Chrome/73.0.3683.103 Safari/537.36", …}
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
connection: NetworkInformation {onchange: null, effectiveType: "4g", rtt: 100, downlink: 4.3, saveData: false}
deviceMemory: 8
hardwareConcurrency: 8
language: "en-US"
languages: (3) ["en-US", "en", "es"]
locks: LockManager {}
onLine: true
permissions: Permissions {}
platform: "MacIntel"
product: (...)
storage: StorageManager {}
usb: USB {onconnect: null, ondisconnect: null}
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
get product: ƒ getValue()
set product: ƒ setValue(newValue)
__proto__: WorkerNavigator

我在iOS上使用React Native 0.59。

在info.plist中，我同时拥有：Privacy - Location When In Use Usage Description和Privacy - Location Always and When In Use Usage Description

CocoaPods：http://dpaste.com/2W9Y57E Info.plist：http://dpaste.com/1CTG8GP

Answer 1

  

WorkerNavigator界面表示允许从Worker访问的Navigator界面的子集。此类对象将为每个工作人员初始化，并可以通过调用 WorkerGlobalScope.navigator 获得的 window.self.navigator 属性使用。

     

Web Workers API的Worker界面表示一个后台任务，可以轻松创建该任务并将其发送回其创建者。创建工作程序就像调用Worker()构造函数并指定要在工作程序线程中运行的脚本一样简单。

在任何网页上运行navigator都会返回一个Navigator实例

>> navigator
Navigator { permissions: Permissions, mimeTypes: MimeTypeArray, plugins: PluginArray, doNotTrack: "unspecified", maxTouchPoints: 0, mediaCapabilities: MediaCapabilities, oscpu: "Intel Mac OS X 10.13", vendor: "", vendorSub: "", productSub: "20100101" }

在react-native应用中运行

导航器将返回一个WorkerNavigator实例。 WorkerNavigator是后台任务。

>> navigator
WorkerNavigator { geolocation: Object, hardwareConcurrency: 4, appCodeName: "Mozilla", appName: "Netscape"… }

WorkerNavigator界面并非与所有浏览器完全兼容/未经测试，但是我在Iphone X模拟器上测试了功能，而navigator.geolocation是defined。

stackoverflow上的几则帖子抱怨Chrome或Safari返回WorkerNavigator geolocation undefined并按照in the following answer的解释

navigator.geolocation是否属于navigator中的Chrome？

  

navigator.geolocation 仅在navigator中属于main thread，而在navigator中不属于worker thread。

     

两个导航器在C++端具有独立的实现。这就是navigator.geolocation线程中不支持worker的原因。

Chromium为Navigator和WorkerNavigator C ++实现提供了单独的接口。

  

Navigator是DOMWindow的属性，而WorkerNavigator是WorkerGlobalScope的属性。

StackOverflow上的用户抱怨chrome webworker does not have the geolocation attribute

  

WorkerGlobalScope接口的navigator属性必须返回WorkerNavigator接口的实例，该实例代表用户代理（客户端）的身份和状态：

[Exposed=Worker]
interface WorkerNavigator {};
WorkerNavigator includes NavigatorID;
WorkerNavigator includes NavigatorLanguage;
WorkerNavigator includes NavigatorOnLine;
WorkerNavigator includes NavigatorConcurrentHardware;

WorkerNavigation和WorkerLocation接口中未包含geolocation方法

  

Navigator为每个工作程序初始化，并且可以通过调用WorkerGlobalScope.navigator获得的 window.self.navigator 属性使用。

如WorkerNavigator api文档中所述，它不包含geolocation()方法。

如果您仍然遇到此问题，可以考虑遵循本指南，手动创建worker并在不同的浏览器上测试方法。

navigator.permissions?检测地理位置支持

  

WorkerNavigator.permissions只读属性返回一个Permissions对象，该对象可用于查询和更新Permissions API涵盖的API的权限状态。

self.permissions.query({name:'notifications'}).then(function(result) {
  if (result.state === 'granted') {
    showNotification();
  } else if (result.state === 'prompt') {
    requestNotificationPermission()
  }
});

更多信息here

问题排查的步骤

1. 您正在使用console.log工具运行react-native-debugger，并且     也许输出是从Mac浏览器而不是手机给出的输出。在模拟器上禁用debugging，并向我们显示console.warn(navigator)和console.warn(navigator.geolocation)

   的输出

   appVersion: "5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103
   Safari/537.36"
   

如下图所示，console.warn(navigator)将在WorkerNavigator中返回一个react-native-debugger-tools对象，而它在模拟器中将返回{product:"ReactNative", "geolocation": {}}。 React-native不会在模拟器中显示console.log。

1. 您是否仅在Iphone或Android上尝试了此问题？

2. 您是否错误地将geolocation对象导入到您的顶部 组件？

   import { navigator } from ...
   

3. 您知道native geolocation library 提供更准确的api和更广泛的设备支持？

4. 您的问题似乎未完全连接到某些浏览器 支持WorkerNavigator界面。你呢 对于最后一点不同意，您能否提供给我们一些证明， 我们错了。 React-Native正在使用浏览器api运行 geolocation在后​​台。您可以重新创建相同的方案 请按照以下说明在您的iphone emulator safari developer console中创建WorkerNavigator instance，然后检索您的位置。您可以演示WorkerNavigator在您的模拟器Safari / Chrome浏览器上的工作原理。
5. 您是否考虑过在 w3c/geolocation-api资料库？你考虑过开门吗 bug report in chromium？

Answer 2

另一个人说的所有事情显然都无法解决我的问题。 至少对我来说，我正在使用RN 0.60，我发现他们（像许多其他软件包一样）将其提取到外部软件包中。 我当然考虑了关于所谓的“精益核心”的决定，但是在rn docs中，关于位置提取没有写任何内容。

所以这是软件包，在这里您可以找到配置它的新指南： https://github.com/react-native-community/react-native-geolocation

不知道它是否在0.59中也不可用