如何将地理位置权限传递给react-native-webview？避免重复授权弹窗

问题原因 #

第一次弹窗是React Native原生的系统权限请求，第二次是WebView内部网页发起的权限请求，导致重复询问。要实现仅弹窗一次，需让WebView复用原生已获取的权限状态。

解决方案步骤 #

1. 原生侧提前申请地理位置权限 #

使用react-native-permissions库统一处理iOS和Android的权限请求：

安装依赖

npm install react-native-permissions --save
# 或
yarn add react-native-permissions

配置权限声明

• iOS：在Info.plist中添加权限描述：

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>应用需要访问你的位置信息以提供相关服务</string>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>应用需要在后台访问你的位置信息</string>
  

• Android：在AndroidManifest.xml中添加权限：

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

2. 在组件中请求权限并传递给WebView #

先在React Native组件中完成权限请求，再通过注入JS或拦截权限请求的方式，让WebView复用该状态：

示例代码

import React, { useState, useEffect } from 'react';
import { PermissionsAndroid, Platform, View } from 'react-native';
import WebView from 'react-native-webview';
import { check, request, PERMISSIONS } from 'react-native-permissions';

const LocationWebView = () => {
  const [locationGranted, setLocationGranted] = useState(false);

  // 请求地理位置权限
  const requestLocationPermission = async () => {
    let granted = false;
    if (Platform.OS === 'ios') {
      const status = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
      granted = status === 'granted';
    } else {
      granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: '位置权限申请',
          message: '应用需要访问你的位置信息',
          buttonPositive: '允许',
          buttonNegative: '取消',
        }
      ) === PermissionsAndroid.RESULTS.GRANTED;
    }
    setLocationGranted(granted);
    return granted;
  };

  useEffect(() => {
    requestLocationPermission();
  }, []);

  // 注入JS覆盖网页的Geolocation方法，避免重复弹窗
  const injectGeoScript = `
    // 保存原生Geolocation方法
    navigator.geolocation._originalGetCurrentPosition = navigator.geolocation.getCurrentPosition;
    navigator.geolocation._originalWatchPosition = navigator.geolocation.watchPosition;

    // 重写方法，根据原生权限状态直接处理
    navigator.geolocation.getCurrentPosition = function(success, error) {
      ${locationGranted ? 
        'navigator.geolocation._originalGetCurrentPosition(success, error);' : 
        'error({code: 1, message: "位置权限未授予"});'
      }
    };

    navigator.geolocation.watchPosition = function(success, error) {
      ${locationGranted ? 
        'navigator.geolocation._originalWatchPosition(success, error);' : 
        'error({code: 1, message: "位置权限未授予"});'
      }
    };
  `;

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: '你的网页地址' }}
        geolocationEnabled={true}
        javaScriptEnabled={true}
        injectedJavaScript={injectGeoScript}
        // Android端可通过onPermissionRequest直接拦截权限请求
        onPermissionRequest={(event) => {
          if (event.permissions.includes('geolocation')) {
            locationGranted ? event.grant(event.permissions) : event.reject();
          }
        }}
      />
    </View>
  );
};

export default LocationWebView;

3. 关键说明 #

• geolocationEnabled={true}：开启WebView的地理位置支持。
• 注入JS：重写网页的getCurrentPosition和watchPosition方法，直接使用原生已获取的权限状态，避免网页再次触发系统弹窗。
• Android端onPermissionRequest：拦截WebView的权限请求，根据原生权限状态直接允许或拒绝，无需二次弹窗。

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