iOS端React Native WebView加载请求定位权限站点时自动关闭如何解决

问题根因 #

React Native WebView默认未处理网页的地理定位权限申请回调，当加载需要位置权限的站点时，系统权限弹窗触发后WebView未收到权限授予响应就会中断加载，表现为自动关闭。

解决步骤 #

1. 配置App原生权限 #

Android端

在android/app/src/main/AndroidManifest.xml中添加位置权限声明：

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

iOS端

在ios/项目名/Info.plist中添加位置权限使用说明：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要获取您的位置来提供附近服务</string>

2. 替换为官方维护的WebView包 #

React Native自带的WebView已停止维护，必须使用官方维护的react-native-webview：

npm install react-native-webview
# 或使用yarn
yarn add react-native-webview

3. 重写WebView权限相关配置 #

完整实现代码如下：

import React from 'react';
import { WebView } from 'react-native-webview';
import { PermissionsAndroid, Platform } from 'react-native';

// 提前申请App层面的位置权限
const requestLocationPermission = async () => {
  if (Platform.OS === 'ios') return true;
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: "位置权限申请",
        message: "需要获取您的位置信息来提供相关服务",
        buttonNeutral: "稍后问我",
        buttonNegative: "取消",
        buttonPositive: "确定"
      }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  } catch (err) {
    console.warn(err);
    return false;
  }
};

const App = () => {
  return (
    <WebView
      originWhitelist={['*']}
      source={{ uri: 'https://www.swiggy.com' }}
      // 开启WebView地理定位能力
      geolocationEnabled={true}
      // 处理安卓端网页位置权限申请回调，必须调用allow授予权限
      onGeolocationPermissionsShowPrompt={(origin, allow) => {
        allow(true);
      }}
      // 页面加载前先申请原生权限
      onLoadStart={async () => {
        await requestLocationPermission();
      }}
    />
  );
};

export default App;

关键配置说明 #

• geolocationEnabled属性必须设置为true，默认状态下WebView的地理定位能力是关闭的
• 安卓端必须实现onGeolocationPermissionsShowPrompt回调，网页申请位置权限时如果不主动调用allow(true)授予权限，WebView会默认拒绝请求，导致页面加载中断
• iOS端无需额外处理权限回调，只要配置好Info.plist的权限描述并开启geolocationEnabled即可正常运行
• 建议在进入WebView页面前就完成原生权限申请，避免弹窗打断WebView的渲染流程

内容的提问来源于stack exchange，提问作者Aafaq Ahmad