在 React Native 中渲染 HTML

Question

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

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

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

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

原文由 Scott 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 呈现为原生视图：

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 ，它实现了这个特性的一个基本版本，所以希望它会很快以某种形式登陆。

原文由 Colin Ramsay 发布，翻译遵循 CC BY-SA 4.0 许可协议