Render HTML в React Native

В моем приложении React Native я использую данные JSON, у которых есть необработанные HTML-элементы: <p>This is some text. Let&#8217;s figure out...</p>

Я добавил данные в представление в своем приложении следующим образом:

<Text>{this.props.content}</Text>

Проблема заключается в том, что HTML выходит из raw, он не отображается так, как в браузере. Есть ли способ заставить мои данные JSON выглядеть так, как в браузере, в моем представлении приложения?

Спасибо.

Ответы

Ответ 1

Изменить март 2017: поддержка html устарела. Вместо этого используйте source:

<WebView source={{html: '<p>Here I am</p>'}} />

https://facebook.github.io/react-native/docs/webview.html#html

Благодаря Justin для указания этого.

Edit Feb 2017: PR был принят некоторое время назад, поэтому для рендеринга HTML в React Native просто:

<WebView html={'<p>Here I am</p>'} />

Оригинальный ответ:

Я не думаю, что в настоящее время это возможно. Ожидается поведение, которое вы видите, поскольку компонент Text только выводит... ну, текст. Вам нужен другой компонент, который выводит HTML - и что WebView.

К сожалению, прямо сейчас нет способа непосредственно установить HTML на этом компоненте:

https://github.com/facebook/react-native/issues/506

Однако я только что создал этот PR, который реализует базовую версию этой функции, поэтому, надеюсь, она скоро приземлится в какой-то форме.

Ответ 2

Я нашел этот компонент. https://github.com/jsdf/react-native-htmlview

Этот компонент принимает HTML-контент и отображает его как собственные виды, с настраиваемым стилем и обработкой ссылок и т.д.

Ответ 3

React Native обновил компонент WebView, чтобы обеспечить прямой рендеринг html. Вот пример, который работает для меня

var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";

<WebView
  ref={'webview'}
  automaticallyAdjustContentInsets={false}
  style={styles.webView}
  html={htmlCode} />

Ответ 4

 <WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />

Это сработало для меня:) У меня есть html текстовый файл aboutus.