react-native - 在 React Native 中渲染 HTML

Question

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

我已将数据添加到我的应用程序的 View 中，如下所示:

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

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

Answer 1

编辑 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 渲染到 native View 中:

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

感谢Justin感谢指出这一点。

<小时/>

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

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

<小时/>

原答案:

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

不幸的是，现在无法直接在此组件上设置 HTML:

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

但是我刚刚创建了 this PR它实现了此功能的基本版本，因此希望它能尽快以某种形式落地。