在 React Native 中渲染 HTML答案

【问题标题】：Render HTML in React Native在 React Native 中渲染 HTML
【发布时间】：2015-06-02 19:20:26
【问题描述】：

在我的 React Native 应用程序中，我正在提取具有如下原始 HTML 元素的 JSON 数据：This is some text. Let&#8217;s figure out...

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

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

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

【问题讨论】：

在 React 中，有 dangerouslySetInnerHTML 属性 (facebook.github.io/react/docs/jsx-gotchas.html) 来显示 HTML。我现在无法测试它，但它也可以与 Native 一起使用。
其实我试过了：<Text dangerouslySetInnerHTML={{__html: this.props.content }} ></Text> 没有用，除非我做错了什么。
检查这个：gist.github.com/jsdf/7f983f2cd955fd75d6cc
github.com/react-native-community/react-native-webview 似乎是实现这一目标的最新组件。

标签： react-native

【解决方案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，它实现了此功能的基本版本，因此希望它很快会以某种形式出现。

【讨论】：

很棒的科林，谢谢你这样做！我会关注github问题。
根据版本 0.42 (facebook.github.io/react-native/docs/webview.html#html) 的文档， html 属性已被弃用。它现在说它应该与 source 属性一起使用。 <WebView source={{ html: 'Here I am' }} />.
文档现在说 Note that static HTML will require setting originWhitelist to ["*"]. 虽然我无法让它工作。
伙计，这看起来很棒，除了我将<WebView source={{html: 'Here I am'}} /> 粘贴到我的组件中并且它没有渲染任何东西！帮助！（我会同时尝试react-native-render-html）
react-native WebView 现已弃用：请改用 react-native-community/react-native-webview。

【解决方案2】：

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

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

【讨论】：

带有 CSS 的 HTML 样式不适用于 react-native-htmlview。如果这是一个问题，我不推荐它。
也不推荐。
现在是 2019 年，我看不到现代的、最近更新的、可用的选项！
实际上它确实帮助我在滚动视图中渲染具有高度的html，谢谢
@RenatoBack 如果您需要内联 CSS 支持，请参阅 stackoverflow.com/a/54899575/2779871

【解决方案3】：

一个纯 JavaScript react-native 组件，可将您的 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

您可以通过类名、标签自定义元素的样式，甚至可以register custom renders for tags。有关the official website 的更多信息。

【讨论】：

我认为从 react-native-render-html 版本 6.0.0 开始，该行实际上应该是：

【解决方案4】：

我使用Js函数替换很简单。

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

【讨论】：

您能否添加一些有关此功能或如何/为何工作的信息？
这不会呈现 HTML，它只会去除任何 html 内容。

【解决方案5】：

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} />

【讨论】：

html 属性是now deprecated。请改用 source 属性。

【解决方案6】：

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

这对我有用 :) 我有关于我们的 html 文本文件。

【讨论】：

【解决方案7】：

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


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

【讨论】：