我如何在反应原生 webview 中从网页访问当前位置

Posted 2023-02-25

【中文标题】我如何在反应原生 webview 中从网页访问当前位置

【英文标题】：how can i access current location from web-page in react native webview

【发布时间】：2019-06-22 16:41:27

【问题描述】：

我有一个用 react-js 开发的应用程序。我想将此应用程序集成到react-native-webview。一切都对，但我有两个问题。 1-如何在 react-native-webview 中访问用户的当前位置。 2-如何在 react-native-webview 中调试我的 react-js(webpage) 应用。

第一个问题 如果我在移动浏览器中运行网页并单击该事件，我正在获取用户的当前位置，同时当我的 react-native app 启动时，我正在调用当前的权限位置所以在react-native-debugger 中，我正在获取用户的当前位置。我遵循了类似的示例，但this 与 react-native 有关。确切的问题是如何访问 webview 的当前位置react-native-webview

第二个问题 当我单击事件以获取当前位置时，它没有显示当前位置，所以**我想查看该事件的错误/响应是什么**。因为它在 webview 中，所以我可以在 react-native-debugger 中访问 react-native 日志，但在调试器中看不到 web 视图日志。我也关注了 this 之一，但我不知道将那个 android 配置代码放在哪里。

我的 react-native 代码

import React, Component from 'react';
import PermissionsAndroid from 'react-native';
import  WebView  from "react-native-webview";

export default class App extends Component 

constructor(props)
    super(props);

    // To see all the requests in the chrome Dev tools in the network tab.
    XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

    // fetch logger
    global._fetch = fetch;
    global.fetch = function (uri, options, ...args) 
    return global._fetch(uri, options, ...args).then((response) => 
    console.log('Fetch',  request:  uri, options, ...args , response );
    return response;
);
;

async requestLocationPermission() 
    try 
    const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        
        'title': 'Location Access Permission',
        'message': 'Stanplus would like to use your location ' +
                    'so you we track you.'
        
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) 
        console.log("You can use the location");
        if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined' && navigator.geolocation) 
        navigator.geolocation.getCurrentPosition(
            (position) => 
            console.log(position.coords.latitude,'success');
            ,
            (error) => 
            console.log(error,'fail')
            ,
             enableHighAccuracy: false, timeout: 5000, maximumAge: 10000 
        );
        


     else 
        console.log("Location permission denied")
    
     catch (err) 
    console.warn(err)
    




componentDidMount() 
        this.requestLocationPermission();
    

render() 
    return (
    <WebView 
        source=uri: 'https://3fa4f958.ngrok.io/steptwo'
        style=marginTop: 20
        onMessage=(event)=> console.log(event.nativeEvent.data)
        scalesPageToFit=true
    javascriptEnabled = true
    />
    );

我的 React.js 代码访问当前位置

if (navigator.geolocation) 
        alert('event clicked');//in react-native app its showing the alert
        navigator.geolocation.getCurrentPosition(
        //but inside here react-native can't execute because of location permission issue
        position =>    
                let latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                let geocoder = new window.google.maps.Geocoder();
                //do other stuff----------
            
        )

** 我想在用户点击 react-native 应用内的网页事件时获取当前位置以及如何调试 webview 代码**

请帮助卡住了 2 天）：

【参考方案1】：

需要几个步骤才能让它在 Android 上运行。

将此行添加到您的AndroidManifest.xml：

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

然后在您的应用中，您需要在 webview 请求位置之前请求一次位置。在你看来这样做：

import  PermissionsAndroid  from 'react-native';

...

PermissionsAndroid.request(
  PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
  
    title: 'Location Access Permission',
    message: 'We would like to use your location',
    buttonPositive: 'Okay'
  
);

然后也在你的 webview 上添加属性：

geolocationEnabled=true

【参考方案2】：

你需要添加geolocationenabledhttps://facebook.github.io/react-native/docs/webview#geolocationenabled

【讨论】：

谁能更新链接，已经失效了。

Webview 从核心中移除。它现在在这里，但同样的道具。 github.com/react-native-webview/react-native-webview/blob/…