Рендеринг необработанного HTML в вашем приложении React Native

В этом руководстве объясняется, как отображать необработанный HTML-код в приложении React Native с использованием компонента WebView. По сути, WebView - это системный компонент для операционной системы (ОС) Android, который позволяет приложениям Android отображать контент из Интернета непосредственно внутри приложения.
В этом примере мы собираемся выполнить рендеринг необработанный HTML-код в приложении для Android через компонент WebView, его размер нужно настраивать вручную или программно, а не то, о чем изначально позаботился компонент. Кроме того, стилизация содержимого представления для лучшего согласования с остальной частью пользовательского интерфейса потребует аналогичного решения, передачи таблиц стилей в контейнер WebView или, что еще хуже, наличия атрибутов стиля в самом HTML.
ПРИМЕЧАНИЕ. : в этом примере мы используем исходную опору компонента WebView для отображения необработанного HTML-кода на экране Android или iOS.

Отрисовка необработанного HTML-кода в приложении React Native с помощью WebView:

Давайте выполним следующие шаги, чтобы отобразить необработанный HTML-код на экране Android или iOS с помощью WebView в React Native.

Шаг 1. Создайте новый проект в react native. Если вы не знаете, как создать новый проект в react native, просто следуйте этому руководству.

Шаг 2: Откройте index.android.js / index.ios.js в своем любимом редакторе кода, сотрите весь код и следуйте этому руководству.

Шаг 3. Пакеты response-native импортируют все необходимые компоненты.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, WebView, } from 'react-native';

Шаг 4: Реализуйте метод рендеринга и разместите под макетом дизайн внутри блока рендеринга.

htmlContent: внутри блока рендеринга мы создали переменную с именем htmlContent, в которой мы храним необработанный HTML-код.
Также мы разместили компонент WebView внутри блока рендеринга, он отобразит необработанный HTML-код на экране android или ios. С помощью source prop мы сопоставляем необработанный HTML-код с компонентом WebView. Например :

<WebView
  style={styles.container}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  source={{ html: htmlContent  }}
 />

Шаг 5. Примените приведенный ниже дизайн таблицы стилей.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
});

Полный исходный код для App.js

Давайте посмотрим полный исходный код, который помогает отображать необработанный HTML-код в приложении React Native с использованием веб-просмотра.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, WebView, } from 'react-native';

export default class App extends Component {
  render() {
    var htmlContent = '<h1 style="color:red;"> Skptricks Blog </h1>' +
    '<h3> The Basics Of ES6 Generators - Javascript</h3>' +
    '<p> With ES6 generators, we have a different kind of function, which may be paused in the middle, one or many times, and resumed later, allowin... </p>' +
    '<img src="https://3.bp.blogspot.com/-XhR2CaeJE3M/W8oKAFPha_I/AAAAAAAACCs/MnKDQ_jtCjg8kgF9lirPAfa0CupLcsWhQCLcBGAs/s600/gene.png" alt="Image" width="90%" height="200" >' +
    '<h3> React Native Picker Spinner DropDown Menu List Example - Android</h3>' +
    '<p> In this tutorial, we are going to discuss how to create simple picker s pinner dropdown menu list in react native application . Picker Spi... </p>' + '<img src="https://4.bp.blogspot.com/-puNk3kY_CaQ/W8yOhWzPiOI/AAAAAAAACDU/VlQ9bzG3x6c_7Vfm8ENo2c3uQh1jvhd0ACLcBGAs/s600/picker.png" alt="Image" width="90%" height="200" >' +
    '<h3> Create Custom Snackbar Component Example In React Native- Android</h3>' +
    '<p> This tutorial explains how to create simple Snackbar component in react native application . Snackbars are just like Toast messages except ... </p>' +
    '<img src="https://2.bp.blogspot.com/-93jY0dxBGR4/W8NnVz92VSI/AAAAAAAACBc/q77WAtv-Xb0LGsSOBxGRrU1d1QXyYVT6ACLcBGAs/s600/snack.png" alt="Image" width="90%" height="200" >' +
    '<h3> React Native Simple Custom GridView Layout Example Android</h3>' +
    '<p> This tutorial explains how to create simple custom grid view in react native application.  Grid View that displays items in a two-dimension... </p>' +
    '<img src="https://1.bp.blogspot.com/-U6DxHFlg770/W7ECe9uy4rI/AAAAAAAAB-0/Mumx0xM2APQkq4ynVni17BEo1wK1tU-NgCLcBGAs/s600/grid.png" alt="Image" width="90%" height="200" >';
    return (
        <WebView
        style={styles.container}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{ html: htmlContent  }}
        />
      );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
});

Снимок экрана:

Ссылка для скачивания:
https://github.com/skptricks/React-Native/tree/master/Rendering%20Raw%20HTML%20in%20your%20React%20Native% 20приложение

Это все о отображении необработанного HTML в вашем приложении React Native. Он отлично справляется с рендерингом HTML-кода в собственном макете React с возможностью передачи стандартного объекта собственных стилей реакции, ссылающегося на стандартные элементы HTML. Спасибо, что прочитали эту статью, и если у вас есть какие-либо проблемы, у вас есть другое более полезное решение по этой статье, напишите сообщение в разделе комментариев.

Ссылка:

Рендеринг необработанного HTML в вашем приложении React Native

Отрисовка необработанного HTML-кода в приложении React Native с помощью WebView:

Полный исходный код для App.js

Отрисовка необработанного HTML в вашем приложении React Native

Вопросы по теме