react-native-render-html 库从 ul 或 ol 标签渲染流程分析 ol 标签左边有 20单位的空白区域无法移除的问题

最新推荐文章于 2024-05-22 10:39:26 发布

满地星辰

最新推荐文章于 2024-05-22 10:39:26 发布

阅读量1.3k

点赞数

分类专栏： react native android markdown 文章标签： html react native 图文混排 markdown webview

本文链接：https://blog.csdn.net/ybf326/article/details/102906269

版权

react-native-render-html 仓库地址（下面源码指的 4.1.2 版）

https://github.com/archriss/react-native-render-html

HTMLRenderers.js 里面定义了 ul 函数，作用是渲染 ul 标签

ul 函数定义如下：

export function ul (htmlAttribs, children, convertedCSSStyles, passProps = {}) {

HTMLRenderers.js 里面还定义了 ol 函数，作用是渲染 ol 标签

ol 函数定义如下：

export const ol = ul;

没错，ol 函数直接和 ul 函数相等。

分析 ul 函数

export function ul (htmlAttribs, children, convertedCSSStyles, passProps = {}) {
    //创建 ul 标签所代表的 View 的根视图的样式。   -- 命名为『样式1』
    const style = _constructStyles({
        //这里写死了 tagName 为 『ul』   -- 命名为 『要点001』
        tagName: 'ul',
        htmlAttribs,
        passProps,
        //这里写死了 styleSet 为 『View』
        styleSet: 'VIEW'
    });
    const { allowFontScaling, rawChildren, nodeIndex, key, baseFontStyle, listsPrefixesRenderers } = passProps;
    const baseFontSize = baseFontStyle.fontSize || 14;

    //处理 ol 或者 ul 下面的 li 标签
    children = children && children.map((child, index) => {
        const rawChild = rawChildren[index];
        let prefix = false;
        const rendererArgs = [
            htmlAttribs,
            children,
            convertedCSSStyles,
            {
                ...passProps,
                index
            }
        ];

        if (rawChild) {
            if (rawChild.parentTag === 'ul' && rawChild.tagName === 'li') {
                prefix = listsPrefixesRenderers && listsPrefixesRenderers.ul ? listsPrefixesRenderers.ul(...rendererArgs) : (
                    <View style={
  {
                        marginRight: 10,
                        width: baseFontSize / 2.8,
                        height: baseFontSize / 2.8,
                        marginTop: baseFontSize / 2,
                        borderRadius: baseFontSize / 2.8,
                        backgroundColor: 'black'
                    }} />
                );
            //上面虽然将 tagName 写死了，不过在解析 ol 的子标签的时候，还是通过 else if 对 ol 做了区分处理
            } else if (rawChild.parentTag === 'ol' && rawChild.tagName === 'li') {
                prefix = listsPrefixesRenderers && listsPrefixesRenderers.ol ? listsPrefixesRenderers.ol(...rendererArgs) : (
                    <Text allowFontScaling={allowFontScaling} style={
  { marginRight: 5, fontSize: baseFontSize }}>{ index + 1 })</Text>
                );
            }
        }
        return (
            <View key={`list-${nodeIndex}-${index}-${key}`} style={
  { flexDirection: 'row', marginBottom: 10 }}>
                { prefix }
                <View style={
  { flex: 1 }}>{ child }</View>
            </View>
        );
    });
    return (
        //这里的 style