Comment puis-je faire une capture de signature dans React Native?
J'essaie de comprendre comment je peux effectuer une capture de signature dans React Native. Mon application est créée avec create-react-native-app et Expo et je préférerais ne pas avoir à l'éjecter pour que cette fonctionnalité fonctionne.
Serait-il possible d'envelopper quelque chose comme ceci dans une vue Web? https://github.com/szimek/signature_pad
J'ai également examiné ce projet, https://github.com/RepairShopr/react-native-signature-capture mais il me faut éjecter l'application et utiliser react-native link.
Vous recherchez des conseils ou des suggestions sur la manière de mettre en œuvre cette fonctionnalité tout en maintenant mon projet aussi simple que possible (idéalement, en utilisant create-react-native-app, mais si ce n'est pas possible, quelqu'un pourrait-il m'expliquer pourquoi?)
Je sais que cela fait longtemps, mais il y a un article intéressant ici: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac
Attends, mais comment?
Avec «expo-pixi», vous pouvez ajouter un composant qui vous permet de choisir la couleur, l’épaisseur et l’opacité de votre pinceau. Ensuite, lorsque votre utilisateur lève son doigt, vous recevez un rappel. À partir de là, vous pouvez prendre une capture d’écran de la vue transparente ou obtenir les données de points bruts si c’est ce que vous recherchez.
React Native fonctionne de manière à ce que chaque composant disponible dans React Native mappe vers un composant natif de la plateforme sous-jacente.
c'est à dire. <Image /> est une ImageView sous Android et un UIImageView.h sous iOS.
Le code Javascript lui-même s'exécute dans un thread Javascript sur chaque plate-forme et, lors de l'utilisation de Composants dans React Native, une couche de traduction transmet les informations de JS au pont React Native, ce qui entraîne la création des composants natifs correspondants.
Par défaut, React Native inclut les composants suivants: https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components , ce qui signifie que seuls ces composants sont sortis. -of-the-box dans React Native. Si vous souhaitez utiliser d'autres composants, vous avez 2 options: créer un composant "composite" dans lequel votre composant JS est écrit dans d'autres composants JS ou, si votre fonction nécessite un composant natif non encore exposé par React Native, écrivez le vôtre " "natif" pour exposer certaines fonctionnalités natives à votre code React Native.
La façon dont Expo fonctionne est qu’ils ont intégré React Native et une poignée de composants tiers et l’ont intégré à leur application. La raison pour laquelle vous ne pouvez pas utiliser un composant natif tiers non pris en charge est que, lorsque ce composant est utilisé, l'application elle-même ne dispose pas du code de traduction lui permettant de passer de JS à une vue native Android/iOS.
Donc, pour faire ce que vous demandez, vous devez trouver un composant de dessin "natif" qu'Expo a inclus dans leur plate-forme/application. OR vous devez rechercher un composant de dessin "composite" construit avec d'autres composants par défaut de React Native (ou d'autres composants pris en charge par Expo).
c'est à dire. Sur Android, je pourrais construire cela avec une vue Canvas, mais d'après ce que je peux dire, React Native ne prend pas cet objet en charge de manière native, aussi je l'écrirais probablement moi-même, etc.
Il est difficile pour Expo de prendre en charge tous les composants "natifs" tiers, car React Native est un logiciel à source ouverte et il effectue une itération si rapide que la plupart des composants créés par la communauté ne sont pas toujours à jour ou peuvent entrer en conflit.