79 行
2.0 KiB
Markdown
79 行
2.0 KiB
Markdown
|
# @xuqm/rn-xwebview
|
|||
|
|
|
|||
|
|
XuqmGroup RN SDK WebView 模块。提供增强型 WebView 组件和 JSBridge 通信能力。
|
|||
|
|
|
|||
|
|
## 安装
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
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）
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import { XWebViewScreen } from '@xuqm/rn-xwebview'
|
|||
|
|
|
|||
|
|
// 在导航中使用
|
|||
|
|
<XWebViewScreen />
|
|||
|
|
// URL 通过 openXWebView() 预设
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### XWebViewView — 嵌入式 WebView 组件
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import { XWebViewView } from '@xuqm/rn-xwebview'
|
|||
|
|
|
|||
|
|
<XWebViewView
|
|||
|
|
config={{
|
|||
|
|
url: 'https://example.com',
|
|||
|
|
title: '嵌入式网页',
|
|||
|
|
jsBridgeName: 'XWebViewBridge',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### XWebViewProgress — 进度条
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
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 通信
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// 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`。
|
