react-native-webview实现扫码功能的iOS兼容与切换方案咨询

方案选型建议 #

优先选择第二种原生扫码实现方案，第一种服务端Web扫码方案受限于iOS WKWebView对getUserMedia接口的严格权限限制，会持续遇到相机检测、崩溃、设备枚举异常等兼容性问题，原生扫码的稳定性和适配性远高于Web端实现。

核心问题解决方案 #

1. 扫码库与WebView切换逻辑实现 #

• 提前和服务端约定好扫码触发页的URL标识，比如扫码页路径为/scanCode.xhtml，在onNavigationStateChange的URL拦截逻辑里新增对该路径的判断
• 拦截到扫码路径后不加载该页面，直接跳转到原生扫码页面（可使用react-native-vision-camera + @zxing/library实现原生扫码，兼容你当前的RN版本）
• 扫码完成后回到WebView页面，可通过两种方式传递结果：
  • 优先使用injectJavaScript注入JS代码调用Web端预设的接收函数，无需刷新页面
  • 也可将扫码结果拼接为URL参数，重新加载对应页面，适合不想修改Web端JS逻辑的场景

2. 导航逻辑防重复唤起处理 #

• 新增isScanning状态变量，拦截到扫码URL时先判断当前是否正处于扫码流程中，是则直接跳过处理，避免重复唤起
• 扫码成功或用户取消扫码返回WebView页面时，重置isScanning状态，同时调用webViewRef.current.goBack()回退到扫码入口的前一页面，避免停留在扫码触发页重复触发拦截
• 安卓物理返回键逻辑中新增isScanning状态判断，处于扫码流程中时直接重置状态返回，不触发WebView的回退逻辑

3. 登录会话保留方案 #

• 你当前的WebView配置默认会自动保留Cookie、LocalStorage等会话数据，只要不主动清除WebView缓存、不销毁WebView实例，用户登录状态就不会失效
• 扫码完成后无论是注入JS还是拼接URL参数回跳，只要目标域名和原有服务端域名一致，Cookie会自动携带，完全不会影响登录状态

代码修改示例 #

首先新增状态变量：

const [isScanning, setIsScanning] = useState(false);

修改voltar函数的URL拦截逻辑：

function voltar(url: any){
  setNewUrl(url)
  // 新增扫码URL拦截
  if (url.includes('/scanCode.xhtml') && !isScanning) {
    setIsScanning(true)
    // 跳转到你自己实现的原生扫码页面
    navigation.navigate('ScanCode', {
      // 扫码成功回调
      onScanSuccess: (scanCode) => {
        setIsScanning(false)
        // 方式1：注入JS调用Web端接收函数，无需刷新
        webViewRef.current.injectJavaScript(`
          if(window.receiveScanResult) window.receiveScanResult('${scanCode}')
        `)
        // 方式2：拼接参数刷新页面，替换掉上面的注入逻辑即可
        // const resultUrl = `${url.split('?')[0]}?scanResult=${scanCode}`
        // webViewRef.current.reload({uri: resultUrl})
      },
      // 用户取消扫码回调
      onScanCancel: () => {
        setIsScanning(false)
        webViewRef.current.goBack()
      }
    })
    return
  }
  // 原有逻辑保持不变
  if (url == 'https:/myurl/login.xhtml') {
    console.log('iGUAL');
    logOut();
  } else if (url.includes(`http://fileurl/`)){
    console.log(`opa peguei <==================================================`)
    Linking.openURL(url);
    webViewRef.current.goBack();
  } else {
    console.log(url)
  }
}

iOS端补充配置 #

在项目info.plist文件中新增相机权限描述NSCameraUsageDescription，填写你的业务使用理由即可，原有权限申请逻辑无需修改。

内容的提问来源于stack exchange，提问作者Hérick Raposo