So erstellen Sie ein zentriertes Eingabefeld für Beträge in React Native

Ein übersichtliches, zentriertes Eingabefeld zur Eingabe von Beträgen ist ein kleiner, aber wichtiger Bestandteil jeder Finanz-App. Es verbessert das Benutzererlebnis, sorgt für Klarheit und sorgt für Benutzerfreundlichkeit. In diesem Artikel gehen wir Schritt für Schritt durch die Erstellung einer wiederverwendbaren CurrencySection-Komponente in React Native.

Diese Komponente ist einfach, aber leistungsstark und verfügt über:

• Dynamische Höhenanpassung für das Eingabefeld.
• Automatische Formatierung für Beträge in einer bestimmten Währung.
• Inline-Fehlermeldungen für besseres Benutzer-Feedback.

Lassen Sie uns in die Details eintauchen!

---

Was die Währungssektion macht

Die Komponente „CurrencySection“ dient dazu:

1. Ermöglichen Sie Benutzern die Eingabe von Beträgen in einem optisch ansprechenden, zentrierten Format.
2. Beträge automatisch in die angegebene Währung formatieren.
3. Bieten Sie Flexibilität beim Anpassen von Elementen wie dem Währungssymbol, Platzhaltertext und Fehlermeldungen.

---

Durchführung

Hier ist die vollständige Implementierung der CurrencySection-Komponente:

/* eslint-disable react-native/no-inline-styles */
import React, {useCallback, useState} aus 'react';
importieren {
  Tastatur,
  NativeSyntheticEvent,
  Plattform,
  StyleSheet,
  Texteingabe,
  TextInputContentSizeChangeEventData,
  TextInputProps,
  Sicht,
} von 'react-native';
importieren {
  formatAmountInCurrency,
  MAX_AMOUNT_LENGTH_CURRENCY_SECTION,
  trimNumber,
} from '../../utils/functions';
Farben importieren aus '../../utils/helpers/colors';
import {InlineError} aus '../../utils/helpers/Reusables';
AppText aus '../texts/appText' importieren;

Schnittstelle CurrencySectionProps erweitert TextInputProps {
  Titel?: string;
  Menge?: string;
  Fehler?: string;
  onChangeAmount?: (amount: string) => Leere;
  isEditable?: boolean;
  Währung?: string;
}

const CurrencySection: React.FC<CurrencySectionProps> = ({
  title = 'Betrag eingeben',
  Betrag = '',
  Fehler = '',
  onChangeAmount,
  isEditable = true,
  Währung = '₦',
  ...Requisiten
}) => {
  const [height, setHeight] = useState(42);

  const onChangeText = useCallback(
    (text: string) => {
      onChangeAmount?.(trimNumber(text));
    },
    [onChangeAmount],
  );

  const onBlur = useCallback(() => {
    wenn (Betrag) {
      const formattedAmount = formatAmountInCurrency(
        Number(amount.replaceAll(',', '')),
      ).replaceAll(',', '');
      onChangeAmount?.(formattedAmount);
    }
  }, [Betrag, onChangeAmount]);

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

  zurückkehren (
    <Anzeigen>




<hr>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173624596347120.jpg" class="lazy" alt="How to Build a Centered Input Field for Amounts in React Native"></p><h3>
  
  
  Highlights der CurrencySection-Komponente
</h3>

<ol>
<li><p><strong>Dynamische Höhenverstellung</strong><br><br>
Die Größe des Eingabefelds passt sich dynamisch an die Inhaltsgröße an und sorgt so für ein klares und anpassungsfähiges Design.  </p></li>
<li><p><strong>Automatische Währungsformatierung</strong><br><br>
Die Funktion formatAmountInCurrency stellt sicher, dass Beträge richtig formatiert werden, sodass sie leichter lesbar sind.  </p></li>
<li><p><strong>Anpassbar und wiederverwendbar</strong><br><br>
Mit Requisiten für Titel, Währungssymbole und Fehlermeldungen ist diese Komponente flexibel genug für verschiedene Anwendungsfälle.  </p></li>
<li><p><strong>Fehlerrückmeldung</strong><br><br>
Inline-Fehlermeldungen geben sofortiges Feedback, ohne den Ablauf der Benutzeroberfläche zu stören.  </p></li>
</ol>


<hr>

<h3>
  
  
  Styling-Auswahl
</h3>

• Ausrichtung: Durch die Zentrierung des Eingabe- und Währungssymbols entsteht ein sauberes, ausgewogenes Layout.
• Schriftgröße und -stärke: Die fette und große Schriftart für die Währungs- und Eingabefelder sorgt dafür, dass sie hervorstechen.
• Farben: Neutrale Platzhalterfarben und transparente Hintergründe sorgen dafür, dass der Fokus auf dem Inhalt liegt.

---

Abschluss

Diese Währungsabschnittskomponente ist eine einfache, aber effektive Ergänzung zu jeder Finanz-App. Es wurde entwickelt, um die wichtigsten Eingabeanforderungen zu erfüllen und gleichzeitig die Benutzeroberfläche optisch ansprechend und funktional zu halten.

Probieren Sie es aus, passen Sie es an den Stil Ihrer App an und ermöglichen Sie Ihren Benutzern ein nahtloses Erlebnis!

Teilen Sie Ihre Gedanken oder Fragen gerne in den Kommentaren mit.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein zentriertes Eingabefeld für Beträge in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!