相当于React Native中的canvas元素

Question

我目前正在开发一个基于React Native的图像处理移动应用程序。不过我在React Native官网上找不到关于图像裁剪、缩放、平移、保存功能（可以通过HTML5 canvas元素轻松实现）的相关文档。

我也做了一些谷歌搜索，但只找到了一个“未维护的”react-native-canvas（https://github.com/iddan/react-native-canvas）。 React Native 中是否有与 canvas 元素等效的元素？

Answer 1

react-native-canvas

这里是维护者。由于这个问题被问到，库中发生了很多变化：它是 React Native 最完整、最兼容的画布组件，具有

Path2D

和渐变等高级功能，与默认的 Web 视图画布不同，它以高 DPI 渲染。

该组件与其他 React Native 组件相比速度较慢，因为它在幕后使用

WebView

进行渲染。不过，与它的通信已经过优化，并且在许多方面类似于 React Native 渲染本机视图的方式。权衡是该库不需要任何本机安装，仅依赖于 React Native JavaScript 运行时和本机

WebView

有一个想法是在 React Native JavaScript 运行时中渲染画布，尽管之前没有人在 JavaScript 运行时上制作过完整的无 DOM 画布功能，因此需要付出相当大的努力来实现。

根据我们在 K Health 的经验，可以为响应式用户交互渲染足够快的图形，但对于完整的动画渲染速度不够快。该组件在我们拥有数千用户的应用程序中使用。

react-native-canvas

的贡献者和用户，包括我自己，都非常愿意提供帮助，如果您有任何疑问，可以随时提出问题或发送电子邮件。

Answer 2

好了，两年后，你又有了新的选择：

https://alibaba.github.io/GCanvas/

此“GCanvas”专为运行 canvas2d 和 WebGL API 的本机环境而设计。

参见

https://alibaba.github.io/GCanvas/docs/Integrate%20GCanvas%20on%20ReactNative.html

Answer 3

有一些选项“相似”但不完全相同。我的建议是...

• React Native SVG - 感觉很像我们都熟悉的 SVG Web 组件。您可以使用这个库做很多事情，甚至动画。

• ART（React Native 版本在此处找到） - React ART 库的“React Native”版本，它又是 ART 库的扩展（在此处找到）。它随 React Native 一起提供，但我认为它尚未集成到默认设置中，因此它位于您的 node_modules 文件夹中，需要导入到 XCode 中（讨论见找到这里）。我通常将项目文件从其所在的 node_modules 文件夹 (node_modules/react-native/Libraries/ART/Art.xcodeproj

  ) 拖到 React Native XCode 项目导航器中的库文件夹中。如果要求复制资源，请单击“是”。然后，进入项目设置文件 -> 常规 -> 链接的框架和库，然后按加号图标。搜索 ART 并将其添加为依赖项。 

注意： 如果您最近几个月才按照官方“入门”指南开始使用react-native，则默认指南是使用“expo”。 React Native SVG 默认包含在 expo 版本中。所以使用它会容易得多。

Answer 4

由于阿里巴巴 GCanvas

壮举：删除 weex 桥和反应式桥并且其最终版本打破了 Android 上的编译，因此出现了 @flyskywhy/react-native-gcanvas npm 包。

经过几个月的努力，

@flyskywhy/react-native-gcanvas在Android和iOS上运行良好，修复了几个bug并添加了Changelog.md

中描述的

feat: support drawImage() from require('some.png') on Android, iOS and Web，并使用README中详细的Example AsUsage进行了重构。医学博士。

有了

性能测试结果，以及方便的类似浏览器的canvas API以及易于移植的示例<canvas/>

react-native-articles-bg可以在Android、iOS和Web上运行，@flyskywhy/react-native-gcanvas

是最好的选择现在：P