react native animated rolling numbers
v1.0.2
react-native-animated-rolling-numbers est un composant React Native qui anime des nombres et des notations compactes (K, M, B, T) avec des styles et des animations personnalisables. Il est conçu pour créer des transitions fluides et accrocheuses entre les valeurs numériques.
L'exemple présenté dans la vidéo est disponible ici.
npm install react-native-animated-rolling-numbers
# or
yarn add react-native-animated-rolling-numbers Assurez-vous que react-native-reanimated est installé dans votre projet. Suivez le guide d'installation officiel ici : installation de React-Native-Reanimated.
Exemple de base
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 ;L'exemple présenté dans la vidéo est disponible ici.
value: numberLa valeur numérique à afficher et à animer.
showSign?: boolean S'il faut afficher le signe du numéro (par exemple, "+" ou "-"). La valeur par défaut est false .
showMinusSign?: boolean Indique s'il faut afficher le signe moins pour les nombres négatifs. La valeur par défaut est true .
showPlusSign?: boolean Indique s'il faut afficher le signe plus pour les nombres positifs. La valeur par défaut est false .
toFixed?: number Nombre de décimales à afficher en notation normale. la valeur par défaut est undefined .
useGrouping?: boolean S'il faut inclure des virgules/points dans le formatage des nombres (par exemple, 1000987 -> 1 000 987). La valeur par défaut est false .
formattedText?: stringTexte formaté personnalisé à afficher à la place de la valeur numérique.
locale?: Intl.LocalesArgument Paramètres régionaux à utiliser pour le formatage des nombres. La valeur par défaut est "en-US" .
enableCompactNotation?: boolean Activez la notation compacte pour les grands nombres (par exemple, 1K, 1M, 1B, 1T). La valeur par défaut est false .
compactToFixed?: number Nombre de décimales à afficher en notation compacte. La valeur par défaut est undefined .
fixedOnlyForCompact?: boolean Si vrai, applique uniquement la précision décimale pour la notation compacte (K/M/B/T). La valeur par défaut est true .
Exemple:
fixedOnlyForCompact est true et compactToFixed est 2 , le nombre 1500 sera affiché sous la forme 1.50K , mais le nombre 999 sera affiché sous la forme 999 (sans décimales).fixedOnlyForCompact est false et compactToFixed est 2 , le nombre 1500 sera affiché sous la forme 1.50K et le nombre 999 sera affiché sous la forme 999.00 .containerStyle?: StylePropStyle du conteneur enveloppant les chiffres animés.
digitContainerStyle?: StylePropStyle du conteneur enveloppant chaque chiffre animé.
textProps?: React.ComponentPropsAccessoires pour le composant de texte principal.
numberTextProps?: React.ComponentPropsAccessoires pour les composants de texte numériques.
commaTextProps?: React.ComponentPropsAccessoires pour le composant de texte virgule.
dotTextProps?: React.ComponentPropsAccessoires pour le composant de texte point décimal.
compactNotationTextProps?: React.ComponentPropsAccessoires pour les composants de texte de notation compacte (K, M, B, T).
signTextProps?: React.ComponentPropsAccessoires pour le composant de texte de signe (si utilisé).
textStyle?: StylePropStyle du composant de texte principal.
numberStyle?: StylePropStyle pour les composants de texte numériques.
commaStyle?: StylePropStyle pour le composant de texte virgule.
dotStyle?: StylePropStyle du composant de texte du point décimal.
compactNotationStyle?: StylePropStyle pour les composants de texte de notation compacte.
signStyle?: StylePropStyle du composant de texte du signe.
spinningAnimationConfig?: objectConfiguration pour l'animation des chiffres. Prise en charge :
duration: number : Durée de l'animation en millisecondes.reduceMotion: boolean : s'il faut réduire le mouvement pour l'accessibilité.easing: EasingFunction : Fonction d'assouplissement personnalisée pour l'animation.animationCallback?: AnimationCallbackFonction de rappel invoquée lorsque l'animation est terminée.
animateToNewValue?: (newValue: number, variant?: DigitVariant) => numberFonction personnalisée pour animer le changement de valeur. La valeur par défaut est une animation de rebond.
Si vous trouvez ce projet utile et souhaitez soutenir son développement continu, pensez à m'offrir un café ! Votre soutien aide à maintenir la créativité et me permet de continuer à améliorer et à maintenir ce projet. Merci! ☕ ?
