عرض عناصر HTML في React Native

Yomna Raouf · 15 أبريل 2021

أعمل على تطبيق باستخدام React Native و أقوم بجلب بيانات من API و هي تحتوي على raw html elements، مثل:

<p>Hello World!</p>

و قد قمت بإضافة هذه البيانات لأحد ال views الخاصة بالتطبيق الخاص بي كما يلي:

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

و لكن مايحدث أن هذه البيانات يتم عرضها و التعامل معها على أنها سلسلة نصية و ليس كما يتم عرضها في المتصفح، فهل يوجد طريقة حتى يتم عرضها كما في المتصفحات و لكن في داخل ال view الخاص بالتطبيق.

Mohammed Saber6 · 16 أبريل 2021

يمكنكي استخدام مكتبة react-native-webview كالآتي:

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

class MyInlineWeb extends Component {
  get content() {
  	return '<h1>Hello world</h1>';
  }
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: this.content }} // هنا نقوم بإعطاء البيانات للمكون
      />
    );
  }
}

Wael Aljamal · 16 أبريل 2021

كما يمكننا استخدام المكتبة: react-native-render-html

import React, { Component } from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import HTML from "react-native-render-html";

const htmlContent = `
    <h1>This HTML snippet is now rendered with native components !</h1>
    <h2>Enjoy a webview-free and blazing fast application</h2>
    <img src="https://i.imgur.com/dHLmxfO.jpg?2" />
    <em style="textAlign: center;">Look at how happy this native cat is</em>
`;

export default function Demo() {
  const contentWidth = useWindowDimensions().width;
  return (
    <ScrollView style={{ flex: 1 }}>
      <HTML source={{ html: htmlContent }} contentWidth={contentWidth} />
    </ScrollView>
  );
}

عرض عناصر HTML في React Native

السؤال

Yomna Raouf

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Mohammed Saber6

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية