在 React Native 中渲染 HTML

Question

在我的 React Native 应用程序中，我正在提取具有原始 HTML 元素的 JSON 数据，如下所示：<p>This is some text. Let’s figure out...</p>

我已将数据添加到我的应用中的视图中，如下所示：

<Text>{this.props.content}</Text>

问题是 HTML 是原始的，它不像在浏览器中那样呈现。有没有办法让我的 JSON 数据看起来像在浏览器中一样，在我的应用程序视图中？

Answer 1

2021 年 1 月编辑：React Native 文档目前推荐 React Native WebView：

<WebView
    originWhitelist={['*']}
    source={{ html: '<p>Here I am</p>' }}
/>

https://github.com/react-native-webview/react-native-webview

如果您不想嵌入 WebView，也可以使用第三方库将 HTML 渲染到本机视图中：

2017 年 3 月编辑：html 道具已被弃用。使用 source 代替：

<WebView source={{html: '<p>Here I am</p>'}} />

https://facebook.github.io/react-native/docs/webview.html#html

感谢 Justin 指出这一点。

2017 年 2 月编辑：PR 不久前被接受，因此要在 React Native 中呈现 HTML，只需：

<WebView html={'<p>Here I am</p>'} />

原答案：

我认为目前这不可能。您看到的行为是预料之中的，因为 Text 组件只输出……好吧，文本。您需要另一个输出 HTML 的组件 - 那就是 WebView.

不幸的是，目前无法直接在此组件上设置 HTML：

https://github.com/facebook/react-native/issues/506

不过，我刚刚创建了 this PR，它实现了此功能的基本版本，因此希望它很快就会以某种形式出现。

Answer 2

我找到了这个组件。 https://github.com/jsdf/react-native-htmlview

此组件采用 HTML 内容并将其呈现为本机视图，具有可自定义的样式和链接处理等。

Answer 3

React Native 已更新 WebView 组件以允许直接 html 渲染。这是一个对我有用的例子

var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";

<WebView
  ref={'webview'}
  automaticallyAdjustContentInsets={false}
  style={styles.webView}
  html={htmlCode} />

Answer 4

 <WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />

这对我有用 :) 我有 html text aboutus 文件。

Answer 5

一个纯 JavaScript 反应本机组件，可将您的 HTML 呈现为 100% 本机视图。它具有高度可定制性和易于使用的特点，旨在能够呈现您扔给它的任何东西。

react-native-render-html

与嵌入式 WebViews.

相比，使用此组件将改善您的应用程序内存占用和性能

安装

npm install react-native-render-html --save or yarn add react-native-render-html

基本用法

import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";

const html = `
  <h1>This HTML snippet is now rendered with native components !</h1>
  <h2>Enjoy a webview-free and blazing fast application</h2>
  <img src="https://i.imgur.com/dHLmxfO.jpg?2" />
  <em style="textAlign: center;">Look at how happy this native cat is</em>
`;

export default function App() {
  // Allow images to scale to available width
  // with contentWidth prop.
  const { width } = useWindowDimensions();
  return (
    <ScrollView style={{ flex: 1 }}>
      <RenderHTML contentWidth={width} source={{ html }} />
    </ScrollView>
  );
}

RenderHTML Props reference

您可以通过 class 名称、标签自定义元素的样式，您甚至可以 register custom renders for tags. More info on the official website.

Answer 6

我简单的用Js函数replace

<Text>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>

Answer 7

import HTML from "react-native-render-html";
var htmlCode = "<b>I am <i>Italic</i></b>";


<HTML source={{html: htmlCode}}/>

Answer 8

WebView 组件没有为我呈现 HTML 片段，例如

<b>hello</b>, world!

但是如果我将 HTML 代码片段包含在文档中，如下例所示，那么它确实呈现了文档：

<View style={styles.accContent}>
    <WebView source={{html: `<!DOCTYPE html><html><body style="font-size: 3rem">${data.content}</body></html>`}} />
</View>

在 React Native 中渲染 HTML

Render HTML in React Native

react-native