0

我收到来自远程 API 的 HTML 格式的响应。除非您按“阅读更多”按钮，否则不应显示整个内容。响应如下所示：

"<p>A suspension concentrate (SC) formulation containing 450 g/litre of napropamide (41.4% w/w) for the control of annual grass and broad-leaved weeds in winter oilseed rape.</p>\r\n<p><strong>DIRECTIONS FOR USE</strong><br /> IMPORTANT: This information is approved as part of the product label. All instructions within this section must be read carefully in order to obtain safe and successful use of this product.</p>\r\n<p><strong>RESTRICTION/WARNINGS</strong><br /> Weed control may be reduced where the spray is mixed too deeply into the soil. <br />Do not treat crops adversely affected by poor soil, adverse weather or cultural conditions. <br />Avoid spray overlap, particularly on headlands. <br />It is important to ensure that the seedbed is free from clods and weeds, and in good tilth.<br /> Incorporation under wet conditions is not satisfactory. <br />AC650 can be used on a wide range of soils but should not be applied to Sands (ADAS &rsquo;85 system)
...

我使用react-native-render-html库渲染它，不幸的是它没有numberOfLines道具。

我尝试了在 Github 上建议的解决方案，该解决方案涉及添加自定义渲染器，该渲染器将所有标签替换为具有我需要的 numberOfLines 道具<p>的 react native标签：<Text>

<HTML
   html={`<p>${description}</p>`}
   renderers={{p: (_, children) => <Text numberOfLines={5}>{children}</Text>}}
/>

它有效，但问题是<p>我的变量中有几个标签description，它显示所有标签都缩短到我输入的任何行数，而不是缩短整篇文章。所以我想我必须使用一个唯一的标签来包装整个 HTML 内容，然后应用相同的逻辑

<HTML
  html={`<section>${description}</section>`}
  renderers={{section: (_, children) => <Text>{children}</Text>}}
/>

同样，该解决方案有效，但它弄乱了里面的内容。未应用换行符等。

经过几次谷歌搜索后，偶然发现了一个名为我的第 3 方库，react-native-read-more-text 我知道它只适用于<Text>标签内的内容，所以我再次<Text>使用模板字符串包装

<ReadMore
  numberOfLines={10}
  renderTruncatedFooter={renderTruncatedFooter}
  renderRevealedFooter={renderRevealedFooter}>
    <HTML
    html={`<Text>${description}</Text>`}
    />
</ReadMore>

这次我收到一个错误：

在此处输入图像描述

我将不胜感激任何帮助

4

1 回答 1

2

我的建议是不要搞砸 react-native-render-html，而是执行以下操作：

  • 将您的 HTML 内容包装在一个高度约为 5 行的容器中；
  • 该容器在其底部具有淡化效果（在 Goodreads 等用户评论平台中很常见）；
  • 在这个容器的底部，可以按下“阅读更多”按钮来扩展容器高度以适应 html 内容高度。

但是，如果您需要一个特定的标签渲染器来实现此类功能，则应查看此 SO 帖子：https ://stackoverflow.com/a/69200348/2779871

于 2020-07-10T10:33:32.933 回答