flutter嵌入react踩坑集

嵌入所需要的依赖包

webview_flutter: ^3.0.0

嵌入需要安卓权限

需要在android\app\src\main这个目录下的AndroidManifest.xml文件中添加如下： 在application标签中添加

      android:usesCleartextTraffic="true"

在 manifest 标签中添加

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

然后开始嵌入

  class _MyHomePageState extends State<MyHomePage> {
  final _webViewKey = GlobalKey<WebViewContainerState>();

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
    //用来拦截手机发返回键
      onWillPop: () async {
        final currentUrl = await _webViewKey.currentState?.getUrl();
       // 如果是首页则退出app如果不是返回上一页
        if (currentUrl != null && currentUrl.contains('welcome')) {
          return true;
        }
        _webViewKey.currentState?.goBack();
        return false;
      },
      child: WebViewContainer(
        key: _webViewKey,
        initialUrl: '***/welcome', // React 应用的地址
      ),
    );
  }
}

class WebViewContainer extends StatefulWidget {
  final String initialUrl;

  const WebViewContainer({Key? key, required this.initialUrl})
      : super(key: key);

  @override
  State<WebViewContainer> createState() => WebViewContainerState();
}

class WebViewContainerState extends State<WebViewContainer> {
  late WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: widget.initialUrl,
      javascriptMode: JavascriptMode.unrestricted,
      // 回调函数用来获取controller,可以用controller来控制 WebView 的行为，例如加载 URL、执行 JavaScript 等操作
      onWebViewCreated: (controller) {
        _webViewController = controller;
      },
    );
  }

  // 调用 WebView 的返回方法
  void goBack() {
    _webViewController.goBack();
  }
  // 获取当前URL的方法
  Future<String?> getUrl() async {
    return await _webViewController.currentUrl();
  }
}