前言
在 React Native 开发中，WebView 组件可以用来显示 Web 页面，但是当 Web 页面高度变化时，需要手动计算并设置 WebView 的高度。这个过程比较繁琐，特别是当页面内容较复杂时，计算也会变得很复杂。@nois/react-native-webview-autoheight 就是一个可以自动计算 WebView 高度的 React Native 组件。
安装
npm install @nois/react-native-webview-autoheight
使用
使用方法
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ----------------------------------------
----- --- - -- -- -
------ -
--------
--------- ---- ------------------------- --
--
--
-
------ ------- ----配置项
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| source | object | null | WebView 显示的页面地址 |
| webViewStyle | object | null | 自定义 WebView 样式 |
| onLoad | function | undefined | WebView 加载完成的回调函数 |
| onError | function | undefined | WebView 加载失败的回调函数 |
| onNavigationStateChange | function | undefined | WebView 跳转的回调函数 |
| onLoadProgress | function | undefined | WebView 加载进度的回调函数 |
注意事项
- 目前该组件只支持 RN >= 0.60。
示例
基本示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ----------------------------------------
----- --- - -- -- -
------ -
--------
--------- ---- ------------------------- --
--
--
-
------ ------- ----自定义样式
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ----------------------------------------
------ - ----------- ---- - ---- ---------------
----- ------ - -------------------
---------- -
----- --
-------- ---
--
-------- -
------------ --
--
---
----- --- - -- -- -
------ -
----- -------------------------
--------
--------- ---- ------------------------- --
-----------------------------
--
-------
--
-
------ ------- ----监听事件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ----------------------------------------
------ - ----------- ----- ---- - ---- ---------------
----- ------ - -------------------
---------- -
----- --
-------- ---
--
-------- -
------------ --
--
---
----- --- - -- -- -
----- ------------ - ------- -- -
-------------------------------
-- -- ------------
--
----- ------------- - ------- -- -
-------------------------------
-- -- ------------
--
----- ----------------------------- - ------- -- -
-------------------
-- -- ------------
--
----- -------------------- - --------------- -- -
------------------------------------------------
-- -- ------------
--
------ -
----- -------------------------
--------
--------- ---- ------------------------- --
-----------------------------
---------------------
-----------------------
-------------------------------------------------------
-------------------------------------
--
-------
--
-
------ ------- ----总结
@nois/react-native-webview-autoheight 可以轻松地实现 WebView 自动计算高度的功能，避免了手动计算高度的繁琐，提高了开发效率。同时该组件支持自定义样式以及监听事件，更加丰富了 WebView 的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d9b