问在react本机中呈现HTML表
EN

Stack Overflow用户

提问于 2022-08-13 03:37:14

回答 1查看 162关注 0票数 -1

在我的项目中，我使用react-native-render-html来呈现html。但是表内容没有正确显示。

import RenderHtml from 'react-native-render-html';
import { WebView } from 'react-native-webview';

const html = `
        <html>
        <head></head>
            <body>
            <style>
                table, th, td {
                    border:1px solid black;
                }
            </style>

            <table style="width:100%">
                <tr>
                <td>Emil</td>
                <td>Tobias</td>
                <td>Linus</td>
                </tr>
                <tr>
                <td>16</td>
                <td>14</td>
                <td>10</td>
                </tr>
            </table>
            </body>
        </html>
    `;

    const webViewProps = {
        originWhitelist: "*"
    };

    return (
        <View style={{ flex: 1 }}>
            <RenderHtml
                source={{ html }}
                WebView={WebView}
                defaultWebViewProps={webViewProps}
            />
        </View>
    );

单击查看结果

有人能给我关于如何解决这个问题的建议吗？我有由Ckeditor从我的网站生成的html表数据，所以我必须找到处理方法。

react-native

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-13 04:35:38

https://meliorence.github.io/react-native-render-html/docs/guides/styling

阅读他们的样式指南时，我没有找到用<style>标记对HTML元素进行样式化的示例，相反，它们提供了一些道具，比如classesStyles、idsStyles或tagsStyles来针对HTML中的元素。( css也应该是JS中的CSS )

不幸的是，上面的道具没有一个真正起作用，我唯一能处理的方法就是传递内联样式。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73341429

复制

相似问题

问在react本机中呈现HTML表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react本机中呈现HTML表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react本机中呈现HTML表
EN