Moneda de formato nativo de React

Este tutorial analizará cómo formatear un número a moneda cuando se usa React Native. Usando React Native, podemos usar la biblioteca react-number-format para formatear un número en una moneda.

Moneda de formato nativo de React

Primero, debe instalar esta biblioteca para usar el formato react-number. Puede instalar esta biblioteca usando este comando:

npm i react-number-format

Después de instalar la biblioteca, debemos importar NumberFormat desde react-number-format en la aplicación React.

import NumberFormat from 'react-number-format';

Luego utilízalo escribiendo el siguiente código:

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

En el código anterior, podemos ver que hay diferentes componentes en la función principal.

NumberFormat consta de funciones adicionales para dar formato a un número en la entrada o el texto. Algunas partes son value, displayType, thousandSeparator, prefix, etc.

value se toma como el número a formatear. Puede ser un texto preparado o un número flotante.

La prop isNumericString debe ser adecuada si el valor es una representación de cadena de un número (sin formato).

displayType especifica cómo se representa el número formateado. Si se proporciona la entrada, se genera un elemento de entrada donde se aplica el formato a medida que se ingresan los caracteres. Si es texto, formatea el valor proporcionado en un lapso como texto estándar.

thousandSeparator se usa para separar números en función de su valor posicional, como miles. Por otro lado, se añade prefijo justo antes del número para generalizar el símbolo de moneda.

Si desea representar formattedValue en un elemento que no sea span, hay una función renderText que podría ser útil. Además, devuelve los accesorios personalizados agregados al componente, lo que les permite pasar al elemento renderizado.

Producción:

En el programa anterior, acabamos de poner el valor como un número. En la salida, podemos ver que la moneda está en un formato bastante bueno.

Por lo tanto, usando React Native, podemos usar la biblioteca react-number-format para formatear un número en una moneda.