- 设置我们的 React Native 项目
- 使用 react-native-render-html 将 HTML 渲染到 React Native 中
- 如何将 HTML 解析为 React Native
- 将样式应用于元素
- 探索 react-native-render-html 的替代方案
- 总结
假设你想使用 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 的替代方案
除了 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 应用中工作。