@jamey.kohler
React Native не может напрямую загружать локальные файлы HTML, поскольку он работает с нативными компонентами мобильных устройств, а не с веб-браузером. Однако, есть несколько способов отобразить HTML-контент в React Native:
1 2 3 |
import { WebView } from 'react-native'; <WebView source={{uri: 'file:///android_asset/local_file.html'}} /> |
Обратите внимание, что путь к файлу может отличаться в зависимости от операционной системы.
1 2 3 |
import RenderHtml from 'react-native-render-html'; <RenderHtml source={require('./local_file.html')} /> |
Здесь require('./local_file.html')
загружает локальный файл HTML, находящийся в том же каталоге, что и компонент, который его загружает.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import HTMLView from 'react-native-htmlview'; import HtmlToReact from 'html-to-react'; const htmlInput = '<div><p>Example HTML content</p></div>'; const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React); const processingInstructions = [ { shouldProcessNode: (node) => true, processNode: processNodeDefinitions.processDefaultNode, }, ]; const ReactNativeComponent = () => ( <HTMLView value={htmlInput} stylesheet={styles} renderNode={node => { if (node.type === 'text') { return node.data; } }} processNode={processNodeDefinitions.processNodeDefinitions(processingInstructions)} /> ); |
Здесь htmlInput
содержит HTML-контент, который нужно отобразить, а processNodeDefinitions
и processingInstructions
используются для преобразования HTML-кода в набор React Native компонентов.