Pregunta equivalente de "lienzo" en React Native


Actualmente estoy trabajando en una aplicación móvil de procesamiento de imágenes basada en React-Native. Sin embargo, no puedo encontrar ningún documento relacionado sobre las funciones de recorte de imagen, acercamiento, desplazamiento y guardado (que se pueden lograr fácilmente con el elemento canvas de HTML5) en el sitio oficial de React-Native.

También realizo algunas búsquedas en Google, pero solo encuentro un react-native-canvas "no mantenido" (https://github.com/lwansbrough/react-native-canvas) ¿Hay algún equivalente del "lienzo" en React Native?


18
2017-10-11 08:11


origen


Respuestas:


Bueno, después de dos años, hay una nueva opción para ti:

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

Este "GCanvas" está diseñado para que el entorno nativo ejecute las API canvas2d y WebGL.

Ver

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


3
2018-03-06 09:05



Hay algunas opciones que son "similares" pero no exactamente iguales. Mis sugerencias serían ...

  • Reaccionar SVG nativo - Se parece mucho a los componentes web SVG con los que todos estamos familiarizados. Puedes hacer muchas cosas con esta biblioteca, incluso con animaciones.

  • ART (la versión React Native encontrado aquí) - Una versión "React Native" de la biblioteca React ART, que a su vez es una extensión de la biblioteca ART encontrado aquí. Se envía con React Native, pero no creo que aún esté integrado en la configuración predeterminada, por lo que está en la carpeta node_modules y debe importarse en XCode (la discusión es encontrado aquí) Normalmente arrastro el archivo de proyecto fuera de la carpeta node_modules donde está ubicado (node_modules/react-native/Libraries/ART/Art.xcodeproj) en la carpeta de bibliotecas en su navegador de proyecto React Native XCode. Si solicita copiar recursos, haga clic en Sí. Luego, vaya al archivo de configuración del proyecto -> general -> Marcos enlazados y Bibliotecas y luego presione el ícono más. Busque ART y agréguelo como una dependencia.


2
2017-08-02 20:46



react-native-canvas mantenedor aquí. Desde que se hizo esta pregunta, ha cambiado mucho en la biblioteca: es el componente de lienzo más completo y compatible para React Native con funciones avanzadas como Path2D y degradados, y a diferencia del lienzo de vista web predeterminado, se procesa en alta DPI.

El componente es más lento en comparación con otros componentes React Native porque detrás de las escenas utiliza una WebView renderizar Sin embargo, la comunicación con ella está optimizada y, en muchos aspectos, se asemeja a la forma en que React Native representa vistas nativas. La desventaja es que la biblioteca no requiere ninguna instalación nativa y solo se basa en el tiempo de ejecución de JavaScript de React y el nativo WebView

Hubo una idea para renderizar el lienzo en el tiempo de ejecución de React Native JavaScript, aunque nadie ha realizado una función de lienzo completo sin DOM en un tiempo de ejecución de JavaScript, por lo que requerirá un esfuerzo decente para implementarlo.

Según nuestra experiencia en K Health, es posible generar gráficos lo suficientemente rápidos para una interacción del usuario receptiva, pero no lo suficientemente rápidos para la animación completa. El componente se usa en nuestra aplicación que tiene miles de usuarios.

Los contribuyentes y usuarios de react-native-canvas, incluyéndome a mí, estamos muy dispuestos a ayudar y, si tiene alguna pregunta, puede abrir un problema o enviar un correo electrónico.


1
2018-05-22 23:47