如何将HTML渲染到React Native？

假设你想使用 React Native 将你的网站或 Web 应用程序转换为移动应用程序,或者你有静态 HTML 代码要在应用程序的特定页面上显示。你会怎么做?你会重写一大堆代码吗?

当然不需要这样做。你可以直接在 React Native 中渲染 HTML。因此,在本文中,我们将学习如何使用 react-native-render-html 库将 HTML 渲染到 React Native 中。

设置我们的 React Native 项目

我们需要设置一个 React Native 项目。我们将通过运行以下命令来实现：

npx react-native init MyTestApp

创建项目后，我们将运行一次，使用以下任一命令检查一切是否按预期工作：

npm run android 
//or 
npm run ios

该应用将根据您选择的配置进行构建并开始运行，无论您是使用虚拟设备还是 Android 或 iOS 设备。

你可以修改 App.js 文件，以在你的主页上看到变化 —— 这是你应用程序的入口页面。我修改了几行代码，以检查它是否运行正常。如果一切顺利，你可以看到一个像下面显示的主页：

使用 react-native-render-html 将 HTML 渲染到 React Native 中

在这个教程中，我们将使用 react-native-render-html 包在我们的 React Native 应用程序中渲染 HTML。保留一些样本 HTML 代码，以便稍后在 React Native 应用程序中使用。

react-native-render-html 库是一个拥有超过三千个 GitHub 星标和 46 位贡献者的开源组件。它可以将你的 HTML 渲染为 iOS 或 Android 应用中的 100%原生视图。

这个库支持我们在开发网络应用时通常使用的所有文本 CSS 方法。除了文本，它还支持图像、锚标签和列表。

如何将 HTML 解析为 React Native

react-native-render-html 文档使用以下数据流图来演示这个工具如何将 HTML 解析为 React Native:

总的来说，首先，我们传递的 HTML 标记将被解析成 DOM。然后，基于输入组装瞬时渲染树(Transient Render Tree)。之后，TTree 被渲染成虚拟 DOM。

将样式应用于元素

对于样式设置，你可以使用内联样式，像这样：

<p style= "color: purple; font-size: 2rem;">

还有另一种处理样式的方式，即使用 mixedStyle 记录。本质上， mixedStyle 是一个包含所有 CSS 的对象，样式将从那里应用。请参见下面的示例：

//JavaScript
const mixedStyle = {
  body: {
    whiteSpace: 'normal',
    color: '#aaa'
  },
  p: {
    color: '#fff'
  }
}

要在 HTML 渲染到 React Native 时使用你的自定义样式， react-native-render-html 库支持 tagsStyles 属性。你可以在该属性中传递你声明的样式，如下所示：

//JavaScript
<RenderHtml
  source={source}
  tagsStyles={mixedStyle}
/>

请记住，当在 React Native 应用程序中渲染 HTML 和自定义样式时，React Native 样式将在构建时被忽略，不会被应用或反映。

使用 react-native-render-html 库，你可以玩转 htmlparser2 生态系统，该系统用于 DOM 篡改。你可以在任何时间点处理 DOM。例如：

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';
import { removeElement, isTag } from 'domutils';

function onElement(element) {
  // Remove the first p from div which has class "parentDiv"
  if (element.attribs['class'] == 'parentDiv') {
    let i = 0;
    for (const p of element.children) {
      if (isTag(p) && i < 1) {
        removeElement(p);
        i++;
      }
    }
  }
}

const source = {
  html: `
    <div class="parentDiv">
      <p>para-1</p>
      <p>para-2</p>
      <p>para-3</p>
    </div>
  `
};

const domVisitors = {
  onElement: onElement
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
      domVisitors={domVisitors}
    />
  );
}

现在让我们在应用程序中使用外部库来渲染 HTML 代码。为此，你需要按照下面的方式修改 App.js 文件：

//JavaScript - JSX
import type {Node} from 'react';
import {
  ScrollView,
  Text,
  View,
} from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
  html: `
    <header style="max-width: 1200px;
      overflow: hidden;
      box-sizing: border-box;
      margin: 20px auto;
      text-align: center;">
      <nav style="padding: 20px 0 0;
          max-width: 400px;
          margin: 0 auto;">
          <a style="display: inline-block;
            color: #666666;
            text-decoration: none;
            font-size: 14px;
            cursor: pointer;" href="#section1">Section 1</a>
          <a style="display: inline-block;
            color: #666666;
            text-decoration: none;
            font-size: 14px;
            cursor: pointer;" href="#section1" href="#section2">Section 2</a>
      </nav>
    </header>
    <header style="display: none;
      position: fixed;
      width:100%,
      top: 0;
      background: #FFFFFF;
      margin: 0 -15px;
      width: 100%;
      border-bottom: 1px solid #CCCCCC;
      box-sizing: border-box;
      box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.5);
      opacity: 0.9;
      z-index: 100;">
      <div style="max-width: 1200px;
          padding: 15px 30px;
          margin: 0 auto;
          overflow: hidden;
          box-sizing: border-box;">
          <nav style="padding: 5px 0;
            max-width: 400px;
            float: right;
            text-align: right;">
            <a style="display: inline-block;
                color: #666666;
                text-decoration: none;
                font-size: 14px;
                cursor: pointer;" href="#section1">Section 1</a>
            <a style="display: inline-block;
                color: #666666;
                text-decoration: none;
                font-size: 14px;
                cursor: pointer;" href="#section2">Section 2</a>
          </nav>
      </div>
    </header>
    <div style="min-width: 300px;
      margin: 0 auto;
      height: 1000px;
      position: relative;
    ">
      <div style="min-height: 100px;position: relative; background: #ffd6cd; width=100vw;" id="section1">
          <h1 style="text-align: center;
            line-height: 500px;
            color: #666666;
            margin: 0;">Section 1</h1>
      </div>
      <div style="min-height: 100px;position: relative; background: #ddebfd; width=100vw;" id="section2">
          <h1 style="text-align: center;
            line-height: 500px;
            color: #666666;
            margin: 0;">Section 2</h1>
      </div>
    </div>
    </div>
  `
};
const App: () => Node = () => {
  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic">
    <View>
      <Text style={{top:"3%", textAlign:"center"}}>
        Render HTML to React Native demo
      </Text>
      <RenderHtml
        source={source}
      />
    </View>
    </ScrollView>
  );
};
export default App;

从第 10 行开始，在 source 变量中，我们编写了我们的 HTML 代码。然后，这段代码由名为 RenderHtml 的方法在第 94 行渲染。我们必须提供我们的 HTML 作为源属性，然后包会处理剩下的部分。

为了证明来自外部库的渲染 HTML 将看起来与使用 React Native 编写的代码相同，第 91 行使用了默认的 React Native <Text> 方法来显示文本。

默认方法渲染的文本和 HTML 渲染输出的文本应如下所示：

探索 react-native-render-html 的替代方案

除了 react-native-render-html 库，还有另一种在 React Native 应用中渲染 web 组件的选项——React Native WebView。这种现代的跨平台替代品对于嵌入从整个 web 应用到简单 HTML 文件的任何内容都有很好的支持。

在这个库中，你可以找到与上述类似的模式。请看下面的示例：

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

// ...
class MyWebComponent extends Component {
  render() {
    return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
  }
}

这个库有许多有用的功能 – 如上传和下载文件，自定义 cookies，页面导航等等。

总结

由于 React 的流行，React Native 需求量大。如果你理解 React，那么通过 React 使用 React Native 的原生支持来制作移动应用就变得非常简单。

此外，你可能已经准备好了 HTML，并希望使用现有的代码制作移动应用，而不是重写代码以适应你的目标平台。使用上述讨论的一种方法，可以将 HTML 原生渲染到 React Native。你无需重新发明轮子，就可以让它在 Android 或 IOS 应用中工作。

以上关于如何将HTML渲染到React Native？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。