如何在react-native-webview中允许弹出窗口不跳转原生浏览器

你只需要给WebView组件添加对应配置拦截跳转即可，无需跳转系统浏览器，修改后的代码如下：

import React from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import { WebView } from 'react-native-webview';

const URL="https://google.com";

export default function App() {
  // 拦截所有跳转请求，全部在当前WebView内部加载
  const handleShouldStartLoadWithRequest = (request) => {
    return true;
  }

  return (
    <View style={styles.container}>
      <View style={{width:'100%',height:'100%'}}>
        <WebView
          source={{ uri: URL }}
          setSupportMultipleWindows={false}
          onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest}
          allowUniversalAccessFromFileURLs={true}
          allowFileAccess={true}
        />
      </View>
      <StatusBar style="auto" />
    </View>
  );
  
}

const styles = StyleSheet.create({
  container: {
    marginTop: 28,
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

配置说明 #

• setSupportMultipleWindows={false}：禁用WebView的多窗口机制，原本触发target="_blank"的链接或弹窗会尝试打开新窗口触发系统浏览器，设置为false后会强制在当前WebView加载
• onShouldStartLoadWithRequest：自定义跳转拦截逻辑，返回true代表允许在当前WebView加载该请求，你也可以在这里添加自定义规则，比如拦截特定域名的跳转
• 两个权限配置为可选参数，根据你加载页面的实际需求开启即可

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