如何在本机反应中呈现html表格？

Posted 2023-03-24

【中文标题】如何在本机反应中呈现html表格？

【英文标题】：How to render html table in react native?

【发布时间】：2019-05-13 04:02:50

【问题描述】：

在我的项目中，我从服务器获取 json 响应，它是一个 html 内容。

我已经使用react-native-render-html 来渲染html。但是表格内容没有显示。

有什么方法可以在 react native 中显示 html 表格吗？这怎么可能？任何帮助都会非常显着。请帮助。我尝试了不同的方法，例如react-native-htmlview。似乎没有按预期工作以下是我使用react-native-render-html 呈现html 内容的代码。

json

    [
    data: 
        course: 
            id: 2864,
            name: "2. This is the title",

            instructor: 
                sub: ""
            ,
            menu_order: 0
        ,
        description: "<p style="
        text - align: justify;
        ">India is undergoing an economic, social and technological transformation. Perhaps no other phase is going to be as critical as the present one in shaping the future of the country as well as determining the welfare of the people. The economic transition is the vital ingredient of these overall change. Faster growth accompanied by industrial sector expansion, skill addition to the people, creation of quality infrastructure etc. will fuel this growth phase.</p> <p style="
        text - align: justify;
        ">For understanding how important is the present development phase, we have to adopt a historical and comparative study. Following factors helps us to understand the present development phase of India.</p> <ol style="
        text - align: justify;
        "> <li><strong>Achievement of higher growth rate as a middle-income economy. </strong></li> </ol> <p style="
        text - align: justify;
        ">India at present is a lower middle-income economy and has to become a high-income economy undergoing a rapid growth phase extending at least three decades.</p> <p style="
        text - align: justify;
        ">Most important narrative about the Indian economy is that it is the third largest in the world in terms of Purchasing Power Parity GDP. But a superior way to asses a country’s development is to consider per capita income. The widely used ranking about countries’ economic position is that of the World Bank’s GDP Per capita (constant US $) and the data for 2016 shows that India’s per capita income is $1861 compared to China’s $ 6994.</p> <p style="
        text - align: justify;
        ">Table: Categorization of countries by World Bank</p> <table> <tbody> <tr> <td ><strong>Category</strong></td> <td ><strong>PCI as on 2015 in constant US Dollar</strong></td> </tr> <tr> <td >Low Income Economy</td> <td >$ 1025 or less</td> </tr> <tr> <td >Middle Income Economy (India - $ 1861)</td> <td >$1026 to $4035 (Lower Middle Income) $4036 to $12475 (Upper Middle Income)</td> </tr> <tr> <td >Higher Income Economy</td> <td >$ 12476 and above</td> </tr> </tbody> </table> <p style="
        text - align: justify;
        ">According to World Bank metrics, a country with less than $1045 is considered as low-income economy whereas one with a PCI of $12736 or higher is considered as a higher income economy. Higher income means higher standard of living. India is at the bottom of the lower middle-income economies and has to achieve higher economic growth, structural changes including industrialisation to raise per capita income near to the $12736 mark in the long run. This is what the country has to achieve through the transition.</p> <ol style="
        text - align: justify;
        " start="
        2 "> <li><strong> Industrial sector expansion</strong></li> </ol> <p style="
        text - align: justify;
        ">There are several factors that drives the economy to prosperity. Per capita income is just a monitored goal. How it can be raised is through achieving more productivity and employment generation in the sectors that can create big changes is decisive element for the country’s transition. Here comes the role of industrial sector. The industrial sector is known for generating huge employment with minimum skill addition. Similarly, no other sector has higher level of tradability as the industrial sector (means a country can earn big income through exports). Graduating to an expanded services sector without undergoing industrialisation will be self-defeating and unsuitable to a big economy like India. Depending on services sector for exports will not reward as other countries like to protect their services sector from the inflow of India’s skilled persons. If India can increase the contribution of the industrial sector in GDP from the present 30 per cent to say 40-45 %, it implies that sizable income and employment are created in the sector.</p> <ol style="
        text - align: justify;
        " start="
        3 "> <li><strong> Skilling the people when demography favours.</strong></li> </ol> <p style="
        text - align: justify;
        ">India has the largest number of young people in the world besides having largest workforce age group population. This situation is expected to remain till 2045. Now, youth means higher ability to produce, consume and thus stimulate overall economic activities. As in the case of an individual, better things happen for an economy when it is young.</p> <ol style="
        text - align: justify;
        curriculum: false,
        purchase_link: false
    ,
    headers: [],
    status: 200
]

我只粘贴了我的 json 响应的一小部分，只是为了显示 html 内容。以下是我的代码的一小部分，只是为了我如何进行渲染。请帮助我找到解决方案。

<Content>
      this.state.section.map(article =>

         <CardItem>

         <HTML  html=article.data.description imagesMaxWidth=Dimensions.get('window').width />
         </CardItem>
           )
        </Content>

【问题讨论】：

你能不能试着渲染下面的 html , const htmlContent = `

你能渲染静态html吗？也请发布 react-native-render-html 的版本

这是我尝试渲染静态 html 内容 i.stack.imgur.com/9DXqx.png 时的输出。版本也是react-native-render-html": "^3.10.0

因此对于静态 htmlContent，它不能提供正确的输出

是的，但 table 无法呈现。在我的情况下，所有其他内容都期待 table 即将到来

【参考方案1】：

在sn-p下面试试这个，基本上所有的table标签都换成iframe了。

let staticHtml = `<h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> <h2>HTML Table</h2> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr></table> `;
  //
  let content = staticHtml;
  const tables = staticHtml.match(/(<table(?:.|\n)*?<\/table>)/g);
  
  tables.map((table) => 
    content = content.replace(table, `<iframe srcdoc="$table"></iframe>`);
  );

console.log("content after including iframe =>", content)

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

实际上没有这样的东西。我试过这个npmjs.com/package/react-native-table-component.But它在我的情况下不起作用。因为我正在从服务器获取响应，其中包含表格以外的内容。

我希望最好不要在 Samuel liew 发布的聊天链接上添加我们对评论检查的讨论

我已经在聊天讨论中发布了包名，你可以查看

【参考方案2】：

您可以使用react-native-render-html 库部分做到这一点。

检查以下网址的答案，它解决了我的问题。

https://github.com/archriss/react-native-render-html/issues/43#issuecomment-426698839

【参考方案3】：

推荐方法

您可以使用@native-html/table-plugin

不推荐的方法

或者对 html 内容中的每个单元格使用内联样式

<td style="border: 1px solid black">Hashan</th>