Comment créer un champ de saisie centré pour les montants dans React Native

Un champ de saisie propre et centré pour saisir les montants est une partie petite mais significative de toute application financière. Il améliore l'expérience utilisateur, apporte de la clarté et garantit la facilité d'utilisation. Dans cet article, nous expliquerons la création d'un composant CurrencySection réutilisable dans React Native.

Ce composant est simple mais puissant, comprenant :

• Réglage dynamique de la hauteur du champ de saisie.
• Formatage automatique des montants dans une devise spécifiée.
• Message d'erreur en ligne pour de meilleurs commentaires des utilisateurs.

Plongeons dans les détails !

---

Ce que fait la section Monnaie

Le composant CurrencySection est conçu pour :

1. Permettez aux utilisateurs de saisir les montants dans un format centré et visuellement attrayant.
2. Formate automatiquement les montants dans la devise spécifiée.
3. Offrez de la flexibilité pour personnaliser des éléments tels que le symbole monétaire, le texte d'espace réservé et les messages d'erreur.

---

Mise en œuvre

Voici l’implémentation complète du composant CurrencySection :

/* eslint-disable react-native/no-inline-styles */
importer React, {useCallback, useState} depuis 'react' ;
importer {
  Clavier,
  NativeSyntheticEvent,
  Plate-forme,
  Feuille de style,
  Entrée de texte,
  TextInputContentSizeChangeEventData,
  TextInputProps,
  Voir,
} de « réagir-natif » ;
importer {
  formatMontantEnCurrency,
  MAX_AMOUNT_LENGTH_CURRENCY_SECTION,
  numéro de garniture,
} depuis '../../utils/functions';
importer des couleurs depuis '../../utils/helpers/colors' ;
importer {InlineError} depuis '../../utils/helpers/Reusables' ;
importer AppText depuis '../texts/appText' ;

l'interface CurrencySectionProps étend TextInputProps {
  titre ? : chaîne ;
  montant ? : chaîne ;
  erreur ? : chaîne ;
  onChangeAmount? : (montant : chaîne) => vide;
  isEditable ? : booléen ;
  devise ? : chaîne ;
}

const CurrencySection : React.FC<CurrencySectionProps> = ({
  title = 'Entrez le montant',
  montant = '',
  erreur = '',
  surChangeAmount,
  isEditable = vrai,
  devise = '₦',
  ...accessoires
}) => {
  const [hauteur, setHeight] = useState(42);

  const onChangeText = useCallback(
    (texte : chaîne) => {
      onChangeAmount?.(trimNumber(text));
    },
    [surChangeAmount],
  );

  const onBlur = useCallback(() => {
    si (montant) {
      const formattedAmount = formatAmountInCurrency(
        Nombre(montant.replaceAll(',', '')),
      ).replaceAll(',', '');
      onChangeAmount?.(formattedAmount);
    }
  }, [montant, onChangeAmount]);

  const handleContentSizeChange = useCallback(
    (e : NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
      setHeight(e.nativeEvent.contentSize.height);
    },
    [],
  );

  retour (
    <Afficher>




<hr>

<p><img src="https://img.php.cn/upload/article/000/000/000/173624596347120.jpg" alt="How to Build a Centered Input Field for Amounts in React Native"></p><h3>
  
  
  Points forts du composant CurrencySection
</h3>

<ol>
<li><p><strong>Réglage dynamique de la hauteur</strong><br><br>
Le champ de saisie se redimensionne dynamiquement pour correspondre à la taille de son contenu, garantissant une conception propre et adaptative.  </p></li>
<li><p><strong>Formatage automatique des devises</strong><br><br>
La fonction formatAmountInCurrency garantit que les montants sont formatés de manière appropriée, ce qui les rend plus faciles à lire.  </p></li>
<li><p><strong>Personnalisable et réutilisable</strong><br><br>
Avec des accessoires pour les titres, les symboles monétaires et les messages d'erreur, ce composant est suffisamment flexible pour divers cas d'utilisation.  </p></li>
<li><p><strong>Commentaires sur les erreurs</strong><br><br>
Les messages d'erreur en ligne fournissent un retour immédiat sans perturber le flux de l'interface utilisateur.  </p></li>
</ol>


<hr>

<h3>
  
  
  Choix de style
</h3>

• Alignement : centrer l'entrée et le symbole monétaire crée une mise en page propre et équilibrée.
• Taille et poids de la police : La police en gras et grande pour la devise et les champs de saisie garantit qu'ils se démarquent.
• Couleurs : les couleurs neutres et les arrière-plans transparents maintiennent le focus sur le contenu.

---

Conclusion

Ce composant CurrencySection est un ajout simple mais efficace à toute application financière. Il est conçu pour répondre aux exigences de saisie de base tout en gardant l’interface utilisateur visuellement attrayante et fonctionnelle.

Essayez-le, personnalisez-le en fonction du style de votre application et laissez vos utilisateurs profiter d'une expérience fluide !

N'hésitez pas à partager vos réflexions ou questions dans les commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!