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وظيفة مخصصة لتحريك تغيير القيمة. الإعدادات الافتراضية للرسوم المتحركة المرتدة.
إذا وجدت هذا المشروع مفيدًا وترغب في دعم تطويره المستمر، ففكر في شراء قهوة لي! يساعد دعمك في الحفاظ على الإبداع ويسمح لي بمواصلة تحسين هذا المشروع والحفاظ عليه. شكرًا لك! ☕؟
