react native animated rolling numbers
v1.0.2
react-native-animated-rolling-numbers ist eine React Native-Komponente, die Zahlen und kompakte Notationen (K, M, B, T) mit anpassbaren Stilen und Animationen animiert. Es wurde entwickelt, um sanfte, auffällige Übergänge zwischen numerischen Werten zu schaffen.
Das im Video gezeigte Beispiel finden Sie hier.
npm install react-native-animated-rolling-numbers
# or
yarn add react-native-animated-rolling-numbers Stellen Sie sicher, dass Sie react-native-reanimated in Ihrem Projekt installiert haben. Folgen Sie der offiziellen Installationsanleitung hier: React-Native-Reanimated-Installation.
Grundlegendes Beispiel
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 ;Das im Video gezeigte Beispiel finden Sie hier.
value: numberDer numerische Wert, der angezeigt und animiert werden soll.
showSign?: boolean Ob das Vorzeichen der Zahl angezeigt werden soll (z. B. „+“ oder „-“). Der Standardwert ist false .
showMinusSign?: boolean Ob das Minuszeichen für negative Zahlen angezeigt werden soll. Der Standardwert ist true .
showPlusSign?: boolean Ob das Pluszeichen für positive Zahlen angezeigt werden soll. Der Standardwert ist false .
toFixed?: number Anzahl der Dezimalstellen, die in normaler Notation angezeigt werden sollen. Der Standardwert ist undefined .
useGrouping?: boolean Ob Kommas/Punkte in die Zahlenformatierung einbezogen werden sollen (z. B. 1000987 -> 1.000.987). Der Standardwert ist false .
formattedText?: stringBenutzerdefinierter formatierter Text, der anstelle des numerischen Werts angezeigt wird.
locale?: Intl.LocalesArgument Das für die Zahlenformatierung zu verwendende Gebietsschema. Standardmäßig ist "en-US" .
enableCompactNotation?: boolean Aktivieren Sie die kompakte Notation für große Zahlen (z. B. 1K, 1M, 1B, 1T). Der Standardwert ist false .
compactToFixed?: number Anzahl der Dezimalstellen, die in kompakter Schreibweise angezeigt werden sollen. Der Standardwert ist undefined .
fixedOnlyForCompact?: boolean Wenn „true“, wird nur die Dezimalgenauigkeit für die kompakte Notation (K/M/B/T) angewendet. Der Standardwert ist true .
Beispiel:
fixedOnlyForCompact den Wert true und compactToFixed den Wert 2 hat, wird die Zahl 1500 als 1.50K angezeigt, die Zahl 999 jedoch als 999 (keine Dezimalstellen).fixedOnlyForCompact den Wert false und compactToFixed den Wert 2 hat, wird die Zahl 1500 als 1.50K und die Zahl 999 als 999.00 angezeigt.containerStyle?: StylePropStil für den Container, der die animierten Ziffern umschließt.
digitContainerStyle?: StylePropStil für den Container, der jede animierte Ziffer umschließt.
textProps?: React.ComponentPropsRequisiten für die Haupttextkomponente.
numberTextProps?: React.ComponentPropsRequisiten für die numerischen Textkomponenten.
commaTextProps?: React.ComponentPropsRequisiten für die Komma-Textkomponente.
dotTextProps?: React.ComponentPropsRequisiten für die Dezimalpunkt-Textkomponente.
compactNotationTextProps?: React.ComponentPropsRequisiten für die Textkomponenten der kompakten Notation (K, M, B, T).
signTextProps?: React.ComponentPropsRequisiten für die Zeichentextkomponente (falls verwendet).
textStyle?: StylePropStil für die Haupttextkomponente.
numberStyle?: StylePropStil für die numerischen Textkomponenten.
commaStyle?: StylePropStil für die Komma-Textkomponente.
dotStyle?: StylePropStil für die Dezimalpunkt-Textkomponente.
compactNotationStyle?: StylePropStil für die Textkomponenten der kompakten Notation.
signStyle?: StylePropStil für die Zeichentextkomponente.
spinningAnimationConfig?: objectKonfiguration für die Ziffernanimation. Unterstützt:
duration: number : Dauer der Animation in Millisekunden.reduceMotion: boolean : Gibt an, ob die Bewegung aus Gründen der Barrierefreiheit reduziert werden soll.easing: EasingFunction : Benutzerdefinierte Beschleunigungsfunktion für die Animation.animationCallback?: AnimationCallbackRückruffunktion, die aufgerufen wird, wenn die Animation abgeschlossen ist.
animateToNewValue?: (newValue: number, variant?: DigitVariant) => numberBenutzerdefinierte Funktion zum Animieren der Wertänderung. Standardmäßig wird eine Bounce-Animation verwendet.
Wenn Sie dieses Projekt nützlich finden und seine Weiterentwicklung unterstützen möchten, denken Sie darüber nach, mir einen Kaffee zu spendieren! Ihre Unterstützung hilft mir, die Kreativität aufrechtzuerhalten und ermöglicht es mir, dieses Projekt weiter zu verbessern und aufrechtzuerhalten. Danke schön! ☕?
