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 ในโปรเจ็กต์ของคุณแล้ว ปฏิบัติตามคู่มือการติดตั้งอย่างเป็นทางการที่นี่: การติดตั้งแบบ 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.00containerStyle?: 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ฟังก์ชั่นที่กำหนดเองเพื่อทำให้การเปลี่ยนแปลงค่าเคลื่อนไหว ค่าเริ่มต้นเป็นภาพเคลื่อนไหวตีกลับ
หากคุณพบว่าโครงการนี้มีประโยชน์และต้องการสนับสนุนการพัฒนาอย่างต่อเนื่อง ลองซื้อกาแฟให้ฉันดู! การสนับสนุนของคุณช่วยรักษาความคิดสร้างสรรค์และช่วยให้ฉันสามารถปรับปรุงและรักษาโครงการนี้ต่อไปได้ ขอบคุณ! ?
