简体   繁体   English

如何在不使用 Webview 的情况下在 React Native 中渲染多个 HTML 内容?

[英]How to render multiple HTML content in React Native without using Webview?

I am doing react native project.我正在做反应原生项目。

There we are getting questions and answers as Json data.在那里,我们得到了 Json 数据的问题和答案。 For Answers, We are getting HTML content in answers key.对于答案,我们在答案键中获得 HTML 内容。

So, I have to show number of answers in flatlist.所以,我必须在 flatlist 中显示答案的数量。 Is there anyway to render HTML content without using Webview?无论如何在不使用 Webview 的情况下呈现 HTML 内容吗?

Json is like following sample: 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>
    }, 
    ....
    ]

The data is dynamic and different answers & questions.数据是动态的,并且有不同的答案和问题。

Any suggestions, Without using Webview, Can we render HTML content into flatlist for loop.任何建议,在不使用 Webview 的情况下,我们可以将 HTML 内容渲染到平面列表中以进行循环。

Try using react-native-render-html :尝试使用react-native-render-html

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

...

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

With this library you can manipulate HTML nodes before rendering.使用这个库,您可以在渲染之前操作 HTML 节点。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM