我如何从反应本机 webview 中的网页访问当前位置

Question

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

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

第二题
当我单击事件以获取当前位置时，它没有显示当前位置，所以 ** 我想查看该事件的 error/response 是什么**。因为它在 webview 中，我可以在 react-native-debugger 中访问 react-native 日志，但在 debugger.I 后面看不到 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 天):

Answer 1

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

Answer 2

需要几个步骤才能使其在 Android 上运行。

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

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

然后在您的应用中，您需要先请求一次位置，然后网络视图才能请求它。在你看来是这样的：

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'
  }
);

然后还在您的网络视图中添加属性:

geolocationEnabled={true}

我如何从反应本机 webview 中的网页访问当前位置

how can i access current location from web-page in react native webview

android

reactjs

react-native

webview

remote-debugging