时间戳

首页 > 解决方案 > 如何在不使用 Webview 的情况下在 React Native 中呈现多个 HTML 内容？

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

问题描述

我正在做反应原生项目。

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

所以，我必须在 flatlist 中显示答案的数量。有没有在不使用 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 中吗？

标签： htmlreact-nativewebviewreact-native-flatlist

解决方案

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

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

...

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

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

推荐阅读