عرض عناصر 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية