Währung des nativen Formats reagieren

Dieses Tutorial befasst sich mit der Formatierung einer Zahl in Währung, wenn React Native verwendet wird. Mit React Native können wir die Bibliothek react-number-format verwenden, um eine Zahl in eine Währung zu formatieren.

Währung des nativen Formats reagieren

Zuerst müssen Sie diese Bibliothek installieren, um das react-number-Format zu verwenden. Sie können diese Bibliothek mit diesem Befehl installieren:

npm i react-number-format

Nach der Installation der Bibliothek müssen wir NumberFormat aus react-number-format in die React-Anwendung importieren.

import NumberFormat from 'react-number-format';

Verwenden Sie es dann, indem Sie den folgenden Code schreiben:

import * as React from 'react';
import {Text, View} from 'react-native';
import NumberFormat from 'react-number-format';

export default function App() {
  return (
    <View>
      <NumberFormat
  value = {12345} displayType = 'text'
  thousandSeparator
  prefix = '$'
  renderText = {(value) => <Text>{value}</Text>}
      />
    </View>
  );
}

Im obigen Code können wir sehen, dass es verschiedene Komponenten in der primären Funktion gibt.

NumberFormat besteht aus zusätzlichen Funktionen, um eine Zahl in der Eingabe oder im Text zu formatieren. Einige Teile sind value, displayType, thousandSeparator, prefix, etc.

“Wert” wird als die zu formatierende Zahl genommen. Das kann ein vorbereiteter Text oder eine Gleitkommazahl sein.

Die Eigenschaft isNumericString sollte korrekt sein, wenn der Wert eine Zeichenfolgendarstellung einer Zahl (unformatiert) ist.

displayType gibt an, wie die formatierte Zahl gerendert wird. Wenn die Eingabe erfolgt, wird ein Eingabeelement generiert, in dem die Formatierung angewendet wird, wenn Zeichen eingegeben werden. Wenn text, formatiert es den gelieferten Wert in einer Spanne wie Standardtext.

thousandSeparator wird verwendet, um Zahlen basierend auf ihrem Stellenwert zu trennen, wie z. B. Tausender. Andererseits wird “Präfix” unmittelbar vor der Zahl hinzugefügt, um das Währungssymbol zu verallgemeinern.

Wenn Sie formattedValue in einem anderen Element als span darstellen möchten, gibt es eine renderText-Funktion, die hilfreich sein könnte. Darüber hinaus gibt es alle benutzerdefinierten Requisiten zurück, die der Komponente hinzugefügt wurden, sodass sie an das gerenderte Element weitergegeben werden können.

Ausgang:

Im obigen Programm haben wir den Wert einfach als Zahl eingegeben. In der Ausgabe können wir sehen, dass die Währung ein ziemlich gutes Format hat.

Daher können wir mit React Native die Bibliothek react-number-format verwenden, um eine Zahl in eine Währung zu formatieren.