XuqmGroup-RNSDK/packages/xwebview

@xuqm/rn-xwebview

XuqmGroup RN SDK WebView 模块。提供增强型 WebView 组件和 JSBridge 通信能力。

安装

yarn add @xuqm/rn-xwebview react-native-webview react-native-blob-util react-native-svg

Peer dependencies：react >= 18，react-native >= 0.76，@react-navigation/native >= 7.0.0

组件

XWebViewScreen — 全屏 WebView（React Navigation screen）

import { XWebViewScreen } from '@xuqm/rn-xwebview'

// 在导航中使用
<XWebViewScreen />
// URL 通过 openXWebView() 预设

XWebViewView — 嵌入式 WebView 组件

import { XWebViewView } from '@xuqm/rn-xwebview'

<XWebViewView
  config={{
    url: 'https://example.com',
    title: '嵌入式网页',
    jsBridgeName: 'XWebViewBridge',
  }}
/>

XWebViewProgress — 进度条

import { XWebViewProgress } from '@xuqm/rn-xwebview'

<XWebViewProgress progress={50} />

API

API	说明
openXWebView(url, options?)	打开 WebView 页面
setXWebViewController(controller)	设置全局 WebView 控制器
getXWebViewConfig()	获取当前 WebView 配置
XWebViewControl	WebView 控制器类

XWebViewConfig 参数

参数	类型	说明
url	string	初始加载地址
title	string	页面标题
jsBridgeName	string	JS 桥接对象名（默认 'XWebViewBridge'）
hideToolbar	boolean	隐藏顶栏
userAgent	string?	自定义 User-Agent
injectedJavaScript	string?	页面加载后注入的 JS
onMessage	(event) => void	H5 发送消息回调

JSBridge 通信

// H5 → Native
window.XWebViewBridge.postMessage(JSON.stringify({ type: 'login', token: '...' }))

// Native → H5
controller.postMessageToWeb("window.dispatchEvent(new CustomEvent('nativeMsg', { detail: { key: 'value' } }))")

详细 handler 列表见 @xuqm/rn-common 的 xwebview/ 目录和 docs/XWebView-JSBridge.md。