Я хочу рендеринга динамического контента из серверной части, которая имеет HTML-теги в реагировать родной - PullRequest
Новая
       28

Я хочу рендеринга динамического контента из серверной части, которая имеет HTML-теги в реагировать родной

0 голосов
/ 24 сентября 2018

Я создал приложение, которое использует woo-commerce в качестве бэк-энда, проблема в том, что многие атрибуты продуктов, которые я получаю из бэк-энда, находятся в html, когда я пытался сделать так, чтобы в нем все воспринималось как тексти в результате вся строка выводится на экран со всеми тегами html, что не является желаемым результатом.

Есть ли какой-нибудь прием, кроме Web-View, для решения этой проблемы?

1 Ответ

0 голосов
/ 24 сентября 2018

Для меня лучший способ рендеринга HTML-кода - это использовать библиотеку под названиемact-native-render-html.

Это простой пример: 

import React, {Component} from 'react';
import {
  View,
  StyleSheet,
} from 'react-native';
import HTMLView from 'react-native-htmlview';

class App extends Component {
  state = {
    html: '<p>Some Dummy <b>HTML</b> code</p>'
  }

  render() {
    return (
        <View style={styles.container}>
          <HTMLView
              value={this.state.html}
              stylesheet={htmlStyleSheet}
          />
        </View>
    );
  }
}

const htmlStyleSheet = StyleSheet.create({
  p: {
    color: 'red'
  },
  b: {
    color: 'black'
  }
})

const styles = StyleSheet.create({
  container: {
    paddingTop: 20,
  }
})

export default App;

Для получения дополнительной информации:

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

Другой вариант заключается в использовании WebView с исходной подпоркой:

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

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}
...