React Native 使用 react-native-webview 渲染 HTML · Issue #8 · collinxz-coder/blo...
source link: https://github.com/collinxz-coder/blog/issues/8?
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在 App 中,渲染 HTML 是一个非常常见的功能,有可能是直接渲染 HTML 字符串或者是通过 URL 渲染远程 HTML页面。 React Native 提供了一个 WebView 组件以供我们实现 HTML 的渲染。
话不多说,让我们来试试这个组件吧。 渲染远程 HTML 内容在开始之前,你需要使用 yarn/npm 来安装它:
安装完成后,我们就可以在代码中使用它: 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> ) } }
重新执行 这是什么原因呢?在查看了一下文档之后,发现 WebView 默认是不会自动设置其高度,所以这个时候高度是0,我们才无法在页面中找到它。需要注意的是,如果 WebView 的父级组件是 View, 直接使用 知道原因后,我们将 WebView 父组件设置 style 为 大功高程,我们已经成功的把百度展现到我们的 App 中了。 渲染 HTML 字符串有时候我们需要将 API 中返回的 HTML 字符串解析出来。渲染 HTML 字符串的时候,我们需要将 source 中的 uri 替换为 html,它的值就是我们的 HTML 字符串。与 uri 不同的是,渲染 HTML 字符串的时候,我们需要设置originWhitelist,比如可以设为["*"]来允许运行本地代码。 {/* ... */} <WebView originWhitelist={['*']} source={{ html: `<h1>这里是一个标题</h1>` }} /> {/* ... */} 到这里我们就成功的把标题给渲染出来了。 根据内容自动计算高度往往我们无法提前预知 HTML 内容的高度,所以我们无法给其设置一个固定的高度,而是需要根据内容来设置其高度。 为了达到这个目的,我们需要用到 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 已经根据其中内容动态的计算了其高度。但是还是有一个问题,这里的文字太小了,要解决这个问题我们需要用到 采用响应式布局这个其实很简单,只需要在 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} /> 到此,关于 React Native 的基础使用我们已经讲完了,更多细节请参考以下链接: |
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK