@brown-bear/ react-native-autoheight-webview (中文(简体) )
用于 React Natural 的自动高度网页视图,支持在 HTML 内含的自动宽度 。 这是原工程的叉子 90岁。 。 。 .
* 特性
- 自动高度: 根据内容自动调整网页视图高度
- 自动宽度: 支持内置 HTML 内容的自动宽度
- 交叉平台: 在iOS和Android两地工作
- 可自定义: 支持自定义 CSS、 JavaScript 和样式
- 业绩优化: 高效大小计算和更新
* 安装
此软件包需要 react-native-webview 作为同伴的依赖.
npm install @brown-bear/react-native-autoheight-webview react-native-webview
使用量
import AutoHeightWebView from '@brown-bear/react-native-autoheight-webview'
import { Dimensions } from 'react-native'
<AutoHeightWebView
style={{
width: Dimensions.get('window').width - 15,
marginTop: 35
}}
customScript={document.body.style.background = 'lightyellow';}
customStyle={ * { font-family: 'Times New Roman'; } p { font-size: 16px; } }
onSizeUpdated={size => console.log(size.height)}
files={[{
href: 'cssfileaddress',
type: 'text/css',
rel: 'stylesheet'
}]}
source={{
html: <p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"> Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));"> If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I'd also use the tags "pets", "marriage", "career change", and "travel tips". </span> </p>
}}
scalesPageToFit={true}
viewportContent={'width=device-width, user-scalable=no'}
// Additional react-native-webview props supported
/>
德莫语
|
你也可以试试 演示项目 一个完整的例子.
API 参考
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
| 样式 | ViewStyle | - 说吧 | 组件造型。 对于iOS文本选择问题,将宽度减少15+并增加比值Top 35+ |
| 自定义脚本 | string | - 说吧 | 自定义插入网页视图的 JavaScript 代码 |
| 自定义样式 | string | - 说吧 | 自定义 CSS 内容添加到页面中 <head> |
| 已更新 | function | - 说吧 | 高度或宽度变化时触发回调 |
| 文件 | FileObject[] | - 说吧 | 要包含的本地或远程文件阵列 |
| 来源 | object | - 说吧 | WebView 源对象( HTML, URI等) |
| 缩放页 | boolean | false | 启用页面缩放( 来自反应- 本地- 网页视图默认值的差异) |
| 滚动 Enabled With Zoomedin 选项 | boolean | false | 允许缩放 iOS 时滚动 |
| 视图 | string | 'width=device-width' (iOS) (中文(简体) ) | 查看端口元标记内容 |
| 显示证书滚动索引 | boolean | false | 显示垂直滚动指标 |
| 显示 Horizontal 滚动索引 | boolean | false | 显示水平滚动指标 |
| 来源白名单 | string[] | ['*'] | 允许导航来源 |
文件对象
interface FileObject {
href: string; // File URL or path
type: string; // MIME type (e.g., 'text/css')
rel: string; // Relationship (e.g., 'stylesheet')
}
所需经费
- 原生反应 0.78
- 反应-内生-网络视图
页:1
以前的版本和移民指南,请参看 原作者的读取器。 。 。 .
说明: Bug修正和新特性仅包含在最新版本中.
捐款
欢迎捐款! 请随意提交拉力请求.
许可证
这个项目根据麻省理工学院的许可证获得许可.
++ 辅助
支持原作者( iou90)
支持此叉
链接
- 仓库数字 : https://github.com/giannistolou/ react-native-autoheight-webview 页面存档备份,存于互联网档案馆 (简体中文)
- npm 软件包数字 : @brown-bear/ react-native-autoheight-webview (中文(简体) )
- 问题数字 : 报告错误或请求特性
由反应原住民社区制作