Обработка Показать больше / меньше текста в React Native - PullRequest
Новая
       34

Обработка Показать больше / меньше текста в React Native

0 голосов
/ 26 апреля 2020

Я получаю ответ от удаленного 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, которое включает добавление настраиваемого средства визуализации, которое заменяет все теги <p> на реагирующий собственный тег <Text>, который содержит нужные мне реквизиты numberOfLines: 

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

Это сработало, но проблема в том, что у меня есть несколько тегов <p> внутри моей переменной description, и это показывает, что все они сокращены до любого количества строк, которые я ввел, вместо сокращения всей статьи. Поэтому я решил, что должен использовать уникальный тег, чтобы обернуть весь контент HTML, а затем применить те же логики c

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

Опять же, решение сработало, но оно испортило содержимое внутри. Разрывы строк не применялись и т. Д. c.

После нескольких поисков Google наткнулся на стороннюю библиотеку под названием react-native-read-more-text Я понимаю, что она работает только с содержимым внутри тега <Text>, поэтому я снова обернул <Text>, используя строку шаблона 

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

На этот раз я получил ошибку:

enter image description here

Буду признателен за любую помощь

...