相当于" canvas" in React Native

时间:2016-10-11 08:11:28

标签: canvas react-native

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

我也做一些谷歌搜索,但只找到一个" unmaintained" react-native-canvas(https://github.com/lwansbrough/react-native-canvas)。有没有相当于"画布"在React Native?

4 个答案:

答案 0 :(得分:6)

这里有

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

与其他React Native组件相比,组件速度较慢,因为在幕后它使用WebView进行渲染。与它的通信虽然在很多方面进行了优化,但与React Native渲染本机视图的方式类似。权衡是库不需要任何本机安装,只依赖于React Native JavaScript运行时和本机WebView

有一个想法是在React Native JavaScript运行时渲染画布,尽管没有人在JavaScript运行时创建了一个完整的无DOM画布,因此需要付出相当大的努力才能实现。

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

react-native-canvas的贡献者和用户(包括我自己)非常愿意提供帮助,如果您有任何疑问,可以随时打开问题或发送电子邮件。

答案 1 :(得分:5)

嗯,两年后,你有了新的选择:

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

这" GCanvas"专为本地环境设计,可运行canvas2d& WebGL API。

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

答案 2 :(得分:4)

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

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

  • ART(React Native版本found here) - React ART库的“React Native”版本,反过来又是库ART found here的扩展。它附带了React Native,但我认为它尚未集成在默认设置中,因此它位于node_modules文件夹中,需要导入XCode(讨论为found here)。我通常将项目文件从它所在的node_modules文件夹(node_modules/react-native/Libraries/ART/Art.xcodeproj)拖出到React Native XCode项目导航器的libraries文件夹中。如果要求复制资源,请单击“是”。然后,进入项目设置文件 - >一般 - >链接的框架和库然后按加号图标。搜索ART并将其添加为依赖项。

注意:如果您刚刚在过去几个月的官方“使用入门”指南中开始使用react-native,则默认指南是使用“expo”。默认情况下,React Native SVG包含在expo版本中。所以使用它会容易得多。

答案 3 :(得分:1)

由于阿里巴巴 GCanvas feat: delete weex bridge & reactive bridge 及其最终版本破坏了在 Android 上的编译,因此出现了 @flyskywhy/react-native-gcanvas npm 包。

经过几个月的努力,@flyskywhy/react-native-gcanvas 在 Android 和 iOS 上运行良好,修复了几个错误并添加了 Changelog.md 中描述的 feat: support drawImage() from require('some.png') on Android, iOS and Web,使用 README.md 中的详细 Example As Usage 重构.

使用 Performance Test ResultConvenient With Browser-like canvas APIs 以及易于 <canvas/> 移植的示例 react-native-particles-bg 在 Android、iOS 和 Web 上运行,@flyskywhy/react-native-gcanvas 是目前的最佳选择:P