équivalent de "canvas" dans React Native
Je travaille actuellement sur une application mobile de traitement d'image basée sur React-Native. Cependant, je ne trouve aucun document connexe sur les fonctions de recadrage, de zoom, de panoramique et d'enregistrement (qui peuvent être facilement réalisées par l'élément HTML5 canvas) sur le site officiel de React-Native.
Je fais également quelques recherches sur Google, mais je ne trouve qu'un canevas natif réactif "non entretenu" ( https://github.com/lwansbrough/react-native-canvas ). Existe-t-il un équivalent du "canevas" dans React Native?
react-native-canvas mainteneur ici. Depuis que cette question a été posée, beaucoup de choses ont changé dans la bibliothèque: c'est le composant de canevas le plus complet et compatible pour React Native avec des fonctionnalités avancées comme Path2D et les dégradés, et contrairement au canevas d'affichage Web par défaut, il est rendu en haute résolution.
Le composant est plus lent que les autres React composants natifs car en arrière-plan, il utilise un WebView pour le rendu. La communication avec lui est cependant optimisée et ressemble à bien des égards à la manière = React Native rend les vues natives. Le compromis est que la bibliothèque ne nécessite aucune installation native et repose uniquement sur le React Runtime JavaScript natif et le natif WebView
Il y avait une idée de rendre le canevas dans le React Runtime JavaScript natif bien que personne n'ait fait une fonctionnalité complète de canevas sans DOM sur un runtime JavaScript auparavant, donc cela prendra un effort décent implémenter.
D'après notre expérience chez K Health, il est possible de rendre des graphiques suffisamment rapides pour une interaction utilisateur réactive, mais pas assez rapidement pour une animation complète. Le composant est utilisé dans notre application qui compte des milliers d'utilisateurs.
Les contributeurs et utilisateurs de react-native-canvas, y compris moi-même, sommes très disposés à vous aider et si vous avez des questions, vous pouvez vous sentir libre d'ouvrir un problème ou d'envoyer un e-mail.
Eh bien, après deux ans, il y a un nouveau choix pour vous:
https://alibaba.github.io/GCanvas/
Ce "GCanvas" est conçu pour un environnement natif pour exécuter les API canvas2d et WebGL.
Voir
https://alibaba.github.io/GCanvas/docs/Integrate%20GCanvas%20on%20ReactNative.html
Il existe quelques options qui sont "similaires" mais pas exactement les mêmes. Mes suggestions seraient ...
React Native SVG - Ressemble beaucoup aux composants Web SVG que nous connaissons tous. Vous pouvez faire beaucoup avec cette bibliothèque, même des animations.
ART (la version React Native) trouvée ici ) - Une version "React Native" de la bibliothèque React ART, qui est à son tour une extension de la bibliothèque ART trouvée ici . Elle est livrée avec React Native but I ne pense pas qu'il a encore été intégré dans la configuration par défaut, il est donc dans votre dossier node_modules et doit être importé dans XCode (la discussion est trouvée ici ). Je fais généralement glisser le fichier de projet hors des node_modules dossier où il se trouve (
node_modules/react-native/Libraries/ART/Art.xcodeproj) dans le dossier des bibliothèques de votre navigateur de projet React Native XCode. S'il vous demande de copier les ressources, cliquez sur oui. Ensuite, accédez au fichier de paramètres de votre projet -> général -> Frameworks et bibliothèques liés puis appuyez sur l'icône plus. Recherchez ART et ajoutez-le comme dépendance.
Remarque: Si vous venez de commencer sur react-native en suivant le guide officiel "Getting Started" au cours des derniers mois, le guide par défaut est d'utiliser "expo ". Et React Native SVG est par défaut inclus dans la version expo. Son utilisation serait donc beaucoup plus facile.