[ReactNative]HTML 렌더 라이브러리

01 개요

경우에 따라 리액트 네이티브 앱 내부에서 html 문서를 렌더링 해야 할 필요가 있는 경우가 있다. 이러한 경우 사용할 수 있는 라이브러리는 2023년 09월 현재 크게 두가지가 있다.

react-native-render-html
react-native-webview

본 문서에서는 위 두 라이브러리를 포함하여 HTML문서를 리액트 네이티브 내부에서 렌더하는 방법에 대해서 다룬다.

최종수정일 : 2023.09.22

---

02 작동방식

02.01 react-native-render-html

---

03 기본적인 사용법

03.01 react-native-render-html

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
 html: `
<p style='text-align:center;'>
 Hello World!
</p>`
};

//` <- Markdown edtorial requirement
export default function App() {
 const { width } = useWindowDimensions();
 return (
   <RenderHtml
     contentWidth={width}
     source={source}
   />
 );
}
//`

03.02 react-native-webview

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

// ...
const MyWebComponent = () => {
 return <WebView source={{ uri: 'https://reactnative.dev/' }} style={{ flex: 1 }} />;
}

99 참조링크

99.01 react-native-render-html

https://blog.logrocket.com/how-render-html-react-native/
https://www.npmjs.com/package/react-native-render-html

99.02 react-native-webview

https://github.com/react-native-webview/react-native-webview