react native animated rolling numbers
v1.0.2
react-native-animated-rolling-numbers — это компонент React Native, который анимирует числа и компактные обозначения (K, M, B, T) с помощью настраиваемых стилей и анимации. Он предназначен для создания плавных, привлекательных переходов между числовыми значениями.
Пример, показанный в видео, доступен здесь.
npm install react-native-animated-rolling-numbers
# or
yarn add react-native-animated-rolling-numbers Убедитесь, что в вашем проекте установлена react-native-reanimated . Следуйте официальному руководству по установке здесь: установка реакции-родной-реанимации.
Базовый пример
import React , { useState } from "react" ;
import { View , StyleSheet , Button } from "react-native" ;
import { AnimatedRollingNumber } from "react-native-animated-rolling-numbers" ;
import { Easing } from "react-native-reanimated" ;
const App = ( ) => {
const [ value , setValue ] = useState ( 1200 ) ;
return (
< View style = { styles . container } >
< AnimatedRollingNumber
value = { value }
showPlusSign
showMinusSign
useGrouping
enableCompactNotation
compactToFixed = { 2 }
textStyle = { styles . digits }
spinningAnimationConfig = { { duration : 500 , easing : Easing . bounce } }
/ >
< Button
onPress = { ( ) => setValue ( value + Math . floor ( Math . random ( ) * 1000 ) ) }
title = "Increase"
/ >
< Button
onPress = { ( ) => setValue ( value - Math . floor ( Math . random ( ) * 1000 ) ) }
title = "Decrease"
/ >
< / View >
) ;
} ;
const styles = StyleSheet . create ( {
container : {
flex : 1 ,
justifyContent : "center" ,
alignItems : "center" ,
} ,
digits : {
fontSize : 32 ,
fontWeight : "bold" ,
paddingHorizontal : 2 ,
color : "#4A90E2" ,
} ,
} ) ;
export default App ;Пример, показанный в видео, доступен здесь.
value: numberЧисловое значение, которое будет отображаться и анимироваться.
showSign?: boolean Показывать ли знак числа (например, «+» или «-»). По умолчанию установлено значение false .
showMinusSign?: boolean Показывать ли знак минус для отрицательных чисел. По умолчанию true .
showPlusSign?: boolean Показывать ли знак плюса для положительных чисел. По умолчанию установлено значение false .
toFixed?: number Количество десятичных знаков, отображаемых в обычном формате. по умолчанию undefined .
useGrouping?: boolean Включать ли запятые/точки в форматирование чисел (например, 1000987 -> 1 000 987). По умолчанию установлено значение false .
formattedText?: stringПользовательский форматированный текст для отображения вместо числового значения.
locale?: Intl.LocalesArgument Языковой стандарт, используемый для форматирования чисел. По умолчанию "en-US" .
enableCompactNotation?: boolean Включите компактное обозначение для больших чисел (например, 1K, 1M, 1B, 1T). По умолчанию установлено значение false .
compactToFixed?: number Количество десятичных знаков для отображения в компактной записи. По умолчанию undefined .
fixedOnlyForCompact?: boolean Если это правда, применяется только десятичная точность для компактной записи (K/M/B/T). По умолчанию true .
Пример:
fixedOnlyForCompact имеет значение true и compactToFixed имеет значение 2 , число 1500 будет отображаться как 1.50K , а число 999 будет отображаться как 999 (без десятичных знаков).fixedOnlyForCompact равно false , а compactToFixed равно 2 , число 1500 будет отображаться как 1.50K , а число 999 будет отображаться как 999.00 .containerStyle?: StylePropСтиль контейнера, в котором заключены анимированные цифры.
digitContainerStyle?: StylePropСтиль контейнера, обертывающего каждую анимированную цифру.
textProps?: React.ComponentPropsРеквизит для основного текстового компонента.
numberTextProps?: React.ComponentPropsРеквизиты для числовых текстовых компонентов.
commaTextProps?: React.ComponentPropsРеквизит для текстового компонента с запятой.
dotTextProps?: React.ComponentPropsРеквизит для текстового компонента десятичной точки.
compactNotationTextProps?: React.ComponentPropsРеквизиты для текстовых компонентов компактной записи (K, M, B, T).
signTextProps?: React.ComponentPropsРеквизит для компонента текста знака (если используется).
textStyle?: StylePropСтиль основного текстового компонента.
numberStyle?: StylePropСтиль для числовых текстовых компонентов.
commaStyle?: StylePropСтиль для текстового компонента запятой.
dotStyle?: StylePropСтиль для текстового компонента десятичной точки.
compactNotationStyle?: StylePropСтиль для текстовых компонентов компактных обозначений.
signStyle?: StylePropСтиль для текстового компонента знака.
spinningAnimationConfig?: objectКонфигурация цифровой анимации. Поддерживает:
duration: number : продолжительность анимации в миллисекундах.reduceMotion: boolean : следует ли уменьшать движение для обеспечения доступности.easing: EasingFunction : пользовательская функция замедления для анимации.animationCallback?: AnimationCallbackФункция обратного вызова, которая вызывается после завершения анимации.
animateToNewValue?: (newValue: number, variant?: DigitVariant) => numberПользовательская функция для анимации изменения значения. По умолчанию используется анимация отскока.
Если вы считаете этот проект полезным и хотите поддержать его постоянное развитие, подумайте о том, чтобы купить мне кофе! Ваша поддержка помогает поддерживать творческий потенциал и позволяет мне продолжать улучшать и поддерживать этот проект. Спасибо! ☕?
