如何在不使用 Webview 的情况下在 React Native 中呈现多个 HTML 内容？答案

【问题标题】：How to render multiple HTML content in React Native without using Webview?如何在不使用 Webview 的情况下在 React Native 中呈现多个 HTML 内容？
【发布时间】：2019-09-19 13:11:04
【问题描述】：

我正在做 react native 项目。

我们得到了 Json 数据形式的问题和答案。对于 Answers，我们在 answers 键中获取 HTML 内容。

所以，我必须在平面列表中显示答案的数量。有没有不使用 Webview 来渲染 HTML 内容？

Json 类似于以下示例：

 [ { question: 'How do I change or reset my password?',
       answer: <p style="color:#B22222">Color text and <span style="color:limegreen;">another color</span>, and now back to the same. Oh, and here's a <span style="background-color:PaleGreen;">different background color</span> just in case you need it!</p>
    }, 
    { question: 'How do I change my user name?',
       answer: <p>Here's a blockquote:</p>
<blockquote>Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.</blockquote>
<p>That was a blockquote.</p>
    }, 
    { question: 'How do I change my email ID?',
       answer:<p style="font-size:18pt">Text size using points.</p><p style="font-size:18px">Text size using pixels.</p><p style="font-size:larger">Text size using relative sizes.</p>
    }, 
    ....
    ]

数据是动态的，有不同的答案和问题。

任何建议，在不使用 Webview 的情况下，我们可以将 HTML 内容渲染到 flatlist for loop 中吗？

【问题讨论】：

标签： html react-native webview react-native-flatlist

【解决方案1】：

尝试使用react-native-render-html：

...
import HTML from 'react-native-render-html';

...

  <HTML tagsStyles={{
        p: styles.textAuthor}} 
        html={htmldata} 
        imagesMaxWidth={screen.screenWidth} 
  />

使用这个库，您可以在渲染之前操作 HTML 节点。

【讨论】：

但是，该库也仅使用 webview。我有多个 HTML 内容。