相当于React Native中的"canvas"

Question

我目前正致力于基于React-Native的图像处理移动应用程序.但是,我找不到任何有关React-Native官方网站上的图像裁剪,缩放,平移和保存功能(可以通过HTML5画布元素轻松实现)的相关文档.

我也做了一些谷歌搜索,但只找到一个"未维护的"react-native-canvas(https://github.com/lwansbrough/react-native-canvas).React Native中有"canvas"的等价物吗？

Answer 1

react-native-canvas维护者在这里.由于这个问题在库中有很多变化:它是React Native最完整和兼容的画布组件,具有高级功能Path2D和渐变等功能,与默认的Web视图画布不同,它在高DPI中呈现.

与其他React Native组件相比,该组件速度较慢,因为它在后台使用a 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”。并作出反应本地SVG是由包含在世博园建造默认。所以使用它会容易得多。