BarFraction

El componente BarFraction renderiza una representación visual de una fracción en forma de barra segmentada. Permite especificar la parte entera de la fracción (whole), el numerador (numerator) y el denominador (denominator) para mostrar una representación fraccionaria en barras con segmentos llenos y vacíos. Este componente renderiza varios componentes Segment para formar una barra completa dividida en segmentos pintados o no pintados.

Funcionamiento

1. Segmentos Completos: Las barras representadas en la parte entera (whole) estarán completamente llenas y pintadas con el color de relleno especificado.
2. Segmentos Parciales: La última barra representará la fracción parcial, mostrando sólo el número de segmentos llenos indicado por el numerator en relación con el denominator.
3. Colores Personalizables: Puedes modificar los colores de los bordes y del relleno de los segmentos. Si no se especifican, el componente utiliza colores por defecto.

Props

• whole (opcional): Número entero que representa la parte entera de la fracción. Se mostrará como un conjunto de barras completamente llenas.

• numerator: Numerador de la fracción que determina la cantidad de segmentos llenos en la última barra parcia.

• denominator: Denominador de la fracción que define el número total de segmentos en cada barra.

• barStyle (opcional): Estilo personalizado para las barras. Acepta cualquier estilo compatible con ViewStyle en React Native.

• color (opcional): Objeto para definir los colores de la barra y los segmentos (se aplica a todos los segmentos por igual). NOTA Este componente ya tiene colores apropiados en aleatorio de forma predeterminada, no necesita ser asignado colores extra, usar solo cuando sea un caso especial.

Ejemplo