ios - iOS平台React Native WebView跳转微信页面白屏请问怎么解决？

Question

在ios端使用RN的webview拉起微信白屏是为什么，webview需要做什么配置吗，在项目里直接拉取微信是没问题的，有什么建议吗各位大佬？
从webview的日志里看到跳转链接：https://img.yeepay.com/fe-resources/wx/jump-weixinh5-v1.html?...

webpage的一些关键代码

<WebView
       ref={webviewRef}
       source={{ uri }}
     />

没有头绪

Answer 1

在React Native的iOS平台上使用WebView组件加载并尝试通过URL跳转到微信（如使用weixin://协议）时遇到白屏问题，通常是因为iOS的WebView（基于WKWebView）不支持直接通过URL Scheme（如weixin://）来启动其他应用。这种URL Scheme通常用于在原生应用中直接打开另一个应用，但在WebView中并不直接支持。

解决方案

1. 使用JavaScript桥接（Bridge）:
   在React Native中，你可以通过原生模块（Native Modules）来桥接JavaScript和原生代码。你可以创建一个原生模块，该模块能够接收一个URL（如weixin://），并在原生层面使用UIApplication.shared.openURL(URL(string: "weixin://..."))来尝试打开微信。
2. 修改WebView的加载逻辑:
   在WebView中，你可以通过注入JavaScript来检测特定的链接，并在这些链接被点击时，通过React Native的桥接功能来触发原生代码的调用。
3. 使用Linking API:
   如果你的React Native应用已经包含了处理URL Scheme的逻辑（例如，使用Linking.openURL），你可以尝试在WebView中捕获链接点击事件，并手动调用Linking.openURL来尝试打开微信。但请注意，WebView通常不会直接触发React Native的链接事件，因此你可能需要注入JavaScript或使用其他方法来捕获这些事件。
4. 检查WebView的源URL:
   确保你加载到WebView的URL是有效的，并且不包含任何可能导致加载失败的重定向或脚本错误。
5. 调试和日志:
   使用Safari的开发者工具来调试WebView中的JavaScript，查看是否有任何错误或警告。同时，检查React Native和iOS的日志输出，看是否有关于WebView加载失败的更多信息。
6. 考虑用户体验:
   如果可能，考虑在WebView外部提供一个按钮或链接，让用户明确知道他们将离开应用并尝试打开微信。这可以提高用户体验，并让用户知道发生了什么。

示例代码（JavaScript桥接）

这里是一个简化的示例，说明如何在React Native中创建一个原生模块来打开URL：

Native Module (iOS)

// Objective-C
#import <React/RCTBridgeModule.h>

@interface OpenURLModule : NSObject <RCTBridgeModule>
@end

@implementation OpenURLModule

RCT_EXPORT_MODULE(OpenURL)

RCT_EXPORT_METHOD(openURL:(NSString *)url)
{
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:url] options:@{} completionHandler:nil];
}

@end

React Native Component

import React, { useRef, useEffect } from 'react';
import { WebView, Linking } from 'react-native';

const MyWebView = ({ uri }) => {
  const webviewRef = useRef(null);

  useEffect(() => {
    const injectScript = `
      document.addEventListener('click', function(event) {
        var href = event.target.getAttribute('href');
        if (href && href.startsWith('weixin://')) {
          // 这里需要调用原生模块的方法，但WebView中不能直接调用，所以这里只是示意
          // 实际中，你可能需要通过某种方式（如postMessage）将URL发送到React Native端，再由React Native调用原生模块
          console.log('Attempting to open:', href);
          event.preventDefault();
        }
      }, false);
    `;

    if (webviewRef.current) {
      webviewRef.current.injectJavaScript(injectScript);
    }
  }, []);

  // 注意：这里并没有直接处理weixin://链接，因为WebView不支持
  // 你需要实现上述的JavaScript桥接或类似机制
  return <WebView ref={webviewRef} source={{ uri }} />;
};

export default MyWebView;

请注意，上面的JavaScript桥接示例并没有直接解决问题，因为它没有展示如何从WebView中的JavaScript调用React Native的原生模块。这通常涉及到更复杂的集成，如使用postMessage和onMessage来在WebView和React Native之间通信。