React ネイティブ フォーマットの通貨

このチュートリアルでは、React Native を使用するときに数値を通貨にフォーマットする方法について説明します。 React Native を使用すると、react-number-format ライブラリを使用して数値を通貨にフォーマットできます。

React ネイティブ フォーマットの通貨

最初に、このライブラリをインストールして react-number 形式を使用する必要があります。 このライブラリは、次のコマンドを使用してインストールできます。

npm i react-number-format

ライブラリをインストールした後、React アプリケーションで react-number-format から NumberFormat をインポートする必要があります。

import NumberFormat from 'react-number-format';

次に、次のコードを記述して使用します。

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>
  );
}

上記のコードでは、プライマリ関数にさまざまなコンポーネントがあることがわかります。

NumberFormat は、入力またはテキストで数値をフォーマットするための追加機能で構成されています。 いくつかの部分は value、displayType、thousandSeparator、prefix などです。

value はフォーマットする数値と見なされます。 準備されたテキストまたは浮動小数点数である可能性があります。

isNumericString プロップは、値が数値の文字列表現 (フォーマットされていない) である場合に適切である必要があります。

displayType は、フォーマットされた数値がどのようにレンダリングされるかを指定します。 入力が与えられた場合、文字が入力されるとフォーマットが適用される入力要素が生成されます。 text の場合、指定された値を標準テキストのようにスパンでフォーマットします。

thousandSeparator は、千などの位の値に基づいて数字を区切るために使用されます。 一方、通貨記号を一般化するために、数値の直前にプレフィックスを追加します。

span 以外の要素で formattedValue をレンダリングしたい場合、役立つかもしれない renderText 関数があります。 さらに、コンポーネントに追加されたすべてのカスタム props を返し、それらをレンダリングされた要素に渡すことができます。

出力：

上記のプログラムでは、値を数値として入れただけです。 出力では、通貨がかなり適切な形式になっていることがわかります。

したがって、React Native を使用すると、react-number-format ライブラリを使用して数値を通貨にフォーマットできます。