在 App 中,渲染 html 是一个非常常见的功能,有可能是直接渲染 html 字符串或者是通过 URL 渲染远程 HTML页面。react Native 提供了一个 WebView 组件以供我们实现 HTML 的渲染。
早先 WebView 是在 react Native 核心包中,后来为了减小 React Native 核心包的体积,便将其单独提出到react-native-webview 组件中。
话不多说,让我们来试试这个组件吧。
渲染远程 HTML 内容
在开始之前,你需要使用 yarn/npm 来安装它:
yarn add react-native-webview
安装完成后,我们就可以在代码中使用它:
import React, { Component } from 'react'; import { View } from 'react-native'; import { WebView } from 'react-native-webview'; export default class App extends Component { render() { return ( <View> <WebView source={{ uri: 'https://www.baidu.com' }} /> </View> ) } }
需要注意的是:第一次安装完成后,需要重新执行一次 react-native run-* 让 rn 帮我们自动 link 一次,否则会抛出以下错误:
重新执行 react-native run-* 后,报错没了,但是页面上一片空白。
这是什么原因呢?在查看了一下文档之后,发现 WebView 默认是不会自动设置其高度,所以这个时候高度是0,我们才无法在页面中找到它。需要注意的是,如果 WebView 的父级组件是 View, 直接使用 style 给 WebView 组件设置高度是无效的,需要给这个 View 组件设置高度才能正常显示。然而在 ScrollView 中,则是需要给 WebView 本身设置 height。其它几个组件,例如 SafeAreaView 我没有去尝试,需要你自己亲自去检验。
知道原因后,我们将 WebView 父组件设置 style 为 flex: 1 ,让其铺满整个屏幕,在 reload 一次看看效果:
大功高程,我们已经成功的把百度展现到我们的 App 中了。
渲染 HTML 字符串
有时候我们需要将 API 中返回的 HTML 字符串解析出来。渲染 HTML 字符串的时候,我们需要将 source 中的 uri 替换为 html,它的值就是我们的 HTML 字符串。与 uri 不同的是,渲染 HTML 字符串的时候,我们需要设置originWhitelist,比如可以设为["*"]来允许运行本地代码。
{/* ... */} <WebView originWhitelist={['*']} source={{ html: `<h1>这里是一个标题</h1>` }} /> {/* ... */}
到这里我们就成功的把标题给渲染出来了。
根据内容自动计算高度
往往我们无法提前预知 HTML 内容的高度,所以我们无法给其设置一个固定的高度,而是需要根据内容来设置其高度。
为了达到这个目的,我们需要用到 injectedJavaScript 和 onMessage ,
injectedJavaScript
这个属性的作用是设置一个在网页加载之前执行的 js 代码。
onMessage
在 webview 内部的网页中调用 window.postMessage 方法时可以触发此属性对应的函数,从而实现网页和 RN 之间的数据交换。 设置此属性的同时会在 webview 中注入一个 postMessage 的全局函数并覆盖可能已经存在的同名实现。
网页端的 window.postMessage 只发送一个参数 data,此参数封装在 RN 端的 event 对象中,即 event.nativeEvent.data。data 只能是一个字符串。
import React, { Component } from 'react'; import { View, ScrollView, SafeAreaView } from 'react-native'; import { WebView } from 'react-native-webview'; export default class App extends Component { constructor(props) { super(props); this.state = { webViewHeight: 0 }; } {/* 根据内容计算 WebView 高度 */} onWebViewMessage = (event) => { this.setState({ webViewHeight: Number(event.nativeEvent.data) }); } render() { return ( <View style={{ flex: 1 }}> <View style={{ height: 100, backgroundColor: 'yellow' }}></View> <View style={{ height: this.state.webViewHeight }}> <WebView originWhitelist={['*']} source={{ html: `<p>这里是一个标题</p>` }} injectedJavaScript='window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight)' onMessage={this.onWebViewMessage} /> </View> <View style={{ height: 100, backgroundColor: 'green' }}></View> </View> ) } }
从上图可以看出我们的 WebView 已经根据其中内容动态的计算了其高度。但是还是有一个问题,这里的文字太小了,要解决这个问题我们需要用到 meta - viewport 。
广州品牌设计公司https://www.houdianzi.com
采用响应式布局
这个其实很简单,只需要在 header 中设置 meta 标签即可。
<WebView
originWhitelist={['*']} source={{ html: ` <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>这里是一个标题</p> </body> </html> ` }} injectedJavaScript='window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight)' onMessage={this.onWebViewMessage} />