react-native - 在 react-native 上查看 Draft js 输出

Question

考虑使用 Draft.js 在 Web 应用程序上进行富文本编辑，然后使用 Draft.js convertToRaw函数将输出转换为 json 对象并将其存储在数据库中。

如果富文本的消费者是一个反应原生的移动应用程序，那么表示富文本的最佳方法是什么？

1. 是否有任何强大的工作或库可以遍历 json 对象并导出本机Text和Image组件？

2. 还有一些将 json 对象导出为 html 的库：

   • https://github.com/sstur/draft-js-export-html

   • https://github.com/rkpasia/draft-js-exporter

导出的 html 然后可以用webview组件表示。这是一种可靠的方法吗？

3. 另一种表示方式是将react放入 react-native webview并使用Editor带有readOnly属性的 Draft.js 。但我不知道该走哪条路！

Answer 1

1. 这似乎是最好的方法。 您必须获取 json 并编写一个能够理解 Draft.js 模型（、、、...）的解析器，inlineStyleRanges并entityRanges在entityMap此基础上导出到本机组件。在工作中我们遇到了同样的问题，所以我们开发了一个库来完成这项工作，它被称为react-native-draftjs-render。它有一个示例项目，您可以在其中查看它的工作原理并了解如何使用它。它也可以在 npm 上找到。

2. 如果您已经拥有 html 版本并想要使用它，您还需要一个解析器来将 html 转换为原生组件。react-native-htmlview似乎可以做到，但我从未使用过。

3. 渲染原生组件比使用 webviews 更好（它们非常有限而且速度很慢），所以我不推荐这种方法。

Answer 2

我们使用redraft来处理从 Draft-js 渲染到 HTML5 和 Weex( rax ) 的富文本。我相信你可以使用它来实现你的目标，因为重新起草只是一个零依赖的转换函数，你可以像div在 HTML 或ViewReact Native 中一样自定义渲染元素。