将React Native View转换为HTML

问题描述

在我的React Native应用中，我希望允许用户选择一些预构建模板的变体之一，对其进行修改，然后能够将其<html>化的版本导出到数据库。

例如，用户可以在标识的区域（可能在<TextInput中添加一些内容，可以通过上传图片来更改占位符图像，甚至可以对样式进行一些微小的更改（将图片移动到，然后将其保存为HTML内容。

示例

<View style={{flex: 1,....}> 
    <TextInput value ="Some content".../>
    <View> 
        <TextInput value ="nested View.../>
        <Image ... />
    </View> 
</View>

现在导出的HTML将是

<div style="flex: 1">
    <p> Some content  </p>
    <div>
        <p> nested View </p>
        <img src='' />
    </div>
</div>

有一些库可以可靠地翻译html以响应本机视图和组件，但我正在寻找另一种方法。

一种方法是使用WebView并走contenteditable路线。这是大多数本机特定的WYSWYG富文本编辑器采用的方法。我尝试了其中一些RTE，但确实发现了所有尝试的问题，包括非最佳UX。此外，插入图片后，一个很大的要求就是调整图片的大小（这当然是假定可以上传，然后选择图片）。我还没有找到执行此操作的编辑器。在webview中运行的TinyMCE具有最好的支持，但没有常规的resize-via-hanldles选项，但似乎确实能够通过更改宽度/高度数字来通过图像对话框调整大小。另一个值得注意的问题是一些早期的模拟器测试似乎无法在webview内播放视频。音频似乎可以正常工作。

我的计划是制作一个简单的混合编辑器。预制模板可以由用户选择。用户可以点击所选模板的文本内容区域并修改内容（可能在单独的场景中）。类似地，修改图像将具有其自己的专用场景。最后，可以将生成的HTML（如果可能的话）导出到数据库。

解决方法

由于我从早期测试中获得了相当不错的移动体验，所以我最终使用了TinyMCE。

可靠地将JSX呈现为HTML的可能解决方案，就像在进行任何必要的更改后在服务器上使用renderToStaticMarkup or renderToString一样简单（例如，在我的示例中，文本输入可能需要不同的解释）。 / p>

也work on the client。

编辑：

React Native无法导入react-dom-server。因此，服务器解决方案将是当前的唯一选择。请参见issue comments here，其中还包含指向将JSX转换为JSON的程序包的链接。

react-native react-native rich-text-editor wysiwyg