66

在我的 React Native 应用程序中，我正在提取具有如下原始 HTML 元素的 JSON 数据：<p>This is some text. Let&#8217;s figure out...</p>

我已将数据添加到我的应用程序的视图中，如下所示：

<Text>{this.props.content}</Text>

问题是 HTML 是原始的，它不像在浏览器中那样呈现。有没有办法让我的 JSON 数据在我的应用程序视图中看起来像在浏览器中一样？

4

7 回答 7

78

2021 年 1 月编辑：React Native 文档目前推荐 React Native WebView：

<WebView
    originWhitelist={['*']}
    source={{ html: '<p>Here I am</p>' }}
/>

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

如果您不想嵌入WebView，也有第三方库可以将 HTML 呈现为原生视图：

  1. react-native-render-html
  2. react-native-htmlview

2017 年 3 月编辑：该html道具已被弃用。改用source：

<WebView source={{html: '<p>Here I am</p>'}} />

https://facebook.github.io/react-native/docs/webview.html#html

感谢贾斯汀指出这一点。

2017 年 2 月编辑：PR 不久前被接受，因此要在 React Native 中呈现 HTML，只需：

<WebView html={'<p>Here I am</p>'} />

原答案：

我认为目前这是不可能的。您看到的行为是预期的，因为 Text 组件只输出......好吧，文本。您需要另一个输出 HTML 的组件 - 这就是WebView。

不幸的是，现在没有办法直接在这个组件上设置 HTML：

https://github.com/facebook/react-native/issues/506

但是我刚刚创建了这个 PR，它实现了这个特性的一个基本版本，所以希望它会很快以某种形式登陆。

于 2015-03-31T09:30:41.930 回答
16

我找到了这个组件。https://github.com/jsdf/react-native-htmlview

该组件采用 HTML 内容并将其呈现为原生视图，具有可自定义的样式和链接处理等。

于 2015-08-18T06:40:31.963 回答
13

一个纯 JavaScript react-native 组件，可将您的 HTML 呈现为 100% 原生视图。它被设计得非常可定制且易于使用，旨在能够渲染你扔给它的任何东西。

react-native-render-html

与嵌入式相比，使用此组件将改善您的应用程序内存占用和性能WebViews。

安装

npm install react-native-render-html --save or yarn add react-native-render-html

基本用法

import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";

const html = `
  <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 App() {
  // Allow images to scale to available width
  // with contentWidth prop.
  const { width } = useWindowDimensions();
  return (
    <ScrollView style={{ flex: 1 }}>
      <RenderHTML contentWidth={width} source={{ html }} />
    </ScrollView>
  );
}

RenderHTML道具参考

您可以通过类名、标签自定义元素的样式，甚至可以为标签注册自定义渲染。更多信息在官方网站上。

于 2019-02-27T06:46:46.937 回答
2

我简单地使用 Js 函数替换。

<Text>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
于 2019-03-27T09:38:54.343 回答
1 
 <WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />

这对我有用:) 我有关于我们文件的 html 文本。

于 2016-11-25T12:21:35.213 回答
1 
import HTML from "react-native-render-html";
var htmlCode = "<b>I am <i>Italic</i></b>";


<HTML source={{html: htmlCode}}/>

在此处输入图像描述

于 2021-09-17T11:14:46.167 回答
1

React Native 更新了 WebView 组件以允许直接呈现 html。这是一个对我有用的例子

var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";

<WebView
  ref={'webview'}
  automaticallyAdjustContentInsets={false}
  style={styles.webView}
  html={htmlCode} />
于 2016-01-26T22:26:06.513 回答