CSS 和 HTML 在 Android/iOS ReactNative/Native 中渲染

Question

我一直在尝试了解在 Android/iOS 中使用 CSS 样式渲染 HTML 的可行性。 为了提供一些背景知识，我们有 web 存在，其中基于一些用户操作，生成并渲染了 HTML。 The HTML contains CSS styles ( reference W3 ), attributes, tags (div/span/a), anchor with url and mailto protocol, custom classes, so on and so forth.
目标是具有良好的视觉保真度、出色的性能、代码重用和更少的维护。

到目前为止我们的选择：

1. 在 WebView 中渲染 HTML：在 WebView 中托管看起来不是一个很好的选择，因为它会破坏用户体验。 另外，我听说 WebView 性能不佳（请纠正我的研究不正确）
2. ReactNative：将 HTML 和 map 解析为 ReactNative 控件
3. Go 纯原生

看起来 Android/iOS 不直接支持 CSS。 在我写下我迄今为止所做的研究之前，我需要几个问题的帮助：

1. ReactNative 是否很好地涵盖了所有CSS styles ？ 作为 RN 组件 map 到 Android/iOS 原生视图，CSS styles 到 ZE84E30B939784DDB6DB2B939784DDB6 的映射如何？
2. 有没有办法直接在 Android/iOS 原生中使用 CSS ？

react-native-htmlview将 HTML 作为输入并将其转换为 RN 组件。 但它似乎不支持带有 styles 的 HTML 标签。 有什么东西可以在这里使用（第 3 方库或自定义解决方案）吗？

Answer 1

我建议你使用原生的 web 视图标签处理程序（Html.TagHandler）。 它可以处理自定义标签，因此一些标签 webView 不支持也可以使用。 您应该覆盖 handleTag 方法。

@Override
public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {
    if (opening) {
        if (tag.equalsIgnoreCase("code")) {
            start(output, new Code());
        } else if (tag.equalsIgnoreCase("center")) {
            start(output, new Center());
        } else if (tag.equalsIgnoreCase("table")) {
            start(output, new Table());
            if (tabLevel == 0) {
                tabHtmlBuild = new StringBuilder();
                output.append("table placeHolder");
            }
            tabLevel++;

        } else if (tag.equalsIgnoreCase("th")) {
            start(output, new Th());
        } else if (tag.equalsIgnoreCase("td")) {
            start(output, new Td());
        } else if (tag.equalsIgnoreCase("tr")) {
            start(output, new Tr());
        }

    }

....}

您可以从源代码中获得的解决方案。

另一方面，React Native 是一个新平台，同时支持 android 和 ios，它使用 js 桥接，并将视图转换为原生 UI。 它仅支持有限的 CSS 样式。 此处列出了支持的详细信息 CSS，您可以查找它。 同时可以阅读office doc：

视图支持样式： 视图样式道具

文字支持样式： 文字样式道具