Flutter InAppWebView中react-web-share无法唤起系统分享问题求助

问题原因 #

Web Share API（react-web-share依赖的原生API）仅在标准浏览器环境中被支持，InAppWebView作为Flutter封装的原生WebView组件，默认未提供该API的系统级调用能力，因此无法像浏览器那样唤起已安装应用的分享选项。

解决方案：通过Flutter与Web端桥接实现原生分享 #

核心思路是放弃在Web端直接调用Web Share API，改为通过Flutter原生层调用系统分享能力，Web端仅负责触发分享请求并传递数据。

1. Web端（React TypeScript）修改分享逻辑 #

在分享按钮的点击事件中，直接调用Flutter注册的JavaScript处理器，传递分享数据：

const handleShare = async () => {
  // 定义要分享的内容
  const shareData = {
    title: "你的分享标题",
    text: "你的分享描述文本",
    url: "https://目标分享链接.com"
  };

  try {
    // 调用Flutter端注册的分享处理器
    await window.flutter_inappwebview?.callHandler('handleShare', shareData);
  } catch (error) {
    console.error('分享请求发送失败:', error);
  }
};

可选：区分环境（浏览器/InAppWebView）
如果需要保留浏览器环境下的原生分享逻辑，可以通过注入的全局变量判断环境：

// 判断是否在Flutter的InAppWebView中
const isInAppWebView = window.isInAppWebView ?? false;

const handleShare = async () => {
  const shareData = { /* 分享数据 */ };
  if (isInAppWebView) {
    // InApp环境下调用Flutter桥接
    await window.flutter_inappwebview?.callHandler('handleShare', shareData);
  } else {
    // 浏览器环境下继续使用react-web-share
    await navigator.share(shareData);
  }
};

2. Flutter端配置桥接与原生分享 #

步骤一：添加依赖

在pubspec.yaml中添加所需依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^6.0.0  # 确保版本适配你的Flutter版本
  share_plus: ^7.2.1            # 用于调用系统原生分享

步骤二：配置InAppWebView并注册处理器

在加载Web页面的Flutter组件中，注册JavaScript处理器并调用原生分享：

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:share_plus/share_plus.dart';

class WebShareScreen extends StatefulWidget {
  final String targetUrl;
  const WebShareScreen({super.key, required this.targetUrl});

  @override
  State<WebShareScreen> createState() => _WebShareScreenState();
}

class _WebShareScreenState extends State<WebShareScreen> {
  late InAppWebViewController webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Web页面')),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse(widget.targetUrl)),
        initialSettings: InAppWebViewSettings(
          javascriptEnabled: true,  // 必须开启JavaScript支持
        ),
        onWebViewCreated: (controller) {
          webViewController = controller;
          // 注册处理Web端分享请求的处理器
          controller.addJavaScriptHandler(
            handlerName: 'handleShare',
            callback: (args) async {
              // 解析Web端传递的分享数据
              final shareData = args.first as Map<String, dynamic>;
              final title = shareData['title'] as String?;
              final text = shareData['text'] as String?;
              final url = shareData['url'] as String?;

              // 调用系统原生分享
              await Share.share(
                text ?? '',
                subject: title,
                // 适配iOS的分享弹窗位置
                sharePositionOrigin: Rect.fromLTWH(0, 0, MediaQuery.of(context).size.width, 200),
              );
            },
          );
        },
        // 可选：向Web端注入环境标识变量
        onLoadStop: (controller, url) async {
          await controller.evaluateJavascript(source: """
            window.isInAppWebView = true;
          """);
        },
      ),
    );
  }
}

3. 测试验证 #

运行Flutter应用，加载目标React页面后点击分享按钮，即可唤起系统已安装应用的分享选项，效果与浏览器一致。

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