能否通过react-native-inappbrowser-reborn监听网页事件并自动关闭内置浏览器？

完全可以实现，核心思路是让网页通过自定义URL Scheme或postMessage发送关闭信号，RN端监听信号后调用内置浏览器的关闭方法。以下是具体实现方案：

方案一：自定义URL Scheme（兼容性更强） #

这是最稳定的方案，几乎所有版本的react-native-inappbrowser-reborn都支持。

1. 配置RN项目的自定义Scheme #

• iOS：在Info.plist中添加以下配置：

  <!-- 允许跳转自定义scheme -->
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>myapp</string>
  </array>
  <!-- 注册自定义scheme -->
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>myapp</string>
      </array>
    </dict>
  </array>
  

• Android：在AndroidManifest.xml的主Activity标签内添加：

  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" />
  </intent-filter>
  

2. 网页端触发关闭信号 #

当网页完成特定操作后，跳转自定义Scheme：

// 网页完成操作后执行
const triggerClose = () => {
  window.location.href = 'myapp://close-browser';
};

3. RN端监听并关闭浏览器 #

通过Linking模块监听URL跳转事件，收到信号后调用InAppBrowser.close()：

import { Linking, useEffect } from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';

useEffect(() => {
  const urlListener = Linking.addEventListener('url', handleUrlOpen);
  return () => urlListener.remove();
}, []);

const handleUrlOpen = ({ url }) => {
  if (url === 'myapp://close-browser') {
    InAppBrowser.close();
  }
};

// 打开内置浏览器的函数
const openInAppBrowser = async () => {
  if (await InAppBrowser.isAvailable()) {
    await InAppBrowser.open('https://your-web-app-url.com', {
      dismissButtonStyle: 'cancel',
      animated: true,
    });
  }
};

方案二：postMessage（仅部分版本支持） #

如果你的react-native-inappbrowser-reborn版本支持WebView通信（需确认版本文档），可以用postMessage实现：

1. RN端配置并监听消息 #

import InAppBrowser from 'react-native-inappbrowser-reborn';

const openInAppBrowser = async () => {
  if (await InAppBrowser.isAvailable()) {
    const browser = await InAppBrowser.open('https://your-web-app-url.com', {
      enableUrlBarHiding: true,
      enableDefaultShare: false,
    });

    // 监听网页发送的消息
    browser.onMessage((message) => {
      if (message.data === 'close-browser') {
        InAppBrowser.close();
      }
    });
  }
};

2. 网页端发送关闭消息 #

// 网页完成操作后发送消息
const triggerClose = () => {
  window.ReactNativeWebView?.postMessage('close-browser');
};

注意事项 #

• 自定义Scheme配置后，需要重新编译RN项目才能生效
• 部分Android设备可能会拦截Scheme跳转，测试时需验证兼容性
• 使用postMessage时，需确认你的react-native-inappbrowser-reborn版本支持该特性，部分轻量模式（如SFSafariViewController）可能不支持

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