react native animated rolling numbers下載 - react native animated rolling numbers下載

react native animated rolling numbers

其他源碼

v1.0.2

下載

React Native 動畫滾動數字

react-native-animated-rolling-numbers是一個 React Native 元件，它透過可自訂的樣式和動畫來對數位和緊湊符號（K、M、B、T）進行動畫處理。它旨在在數值之間創建平滑、引人注目的過渡。

自述文件.mp4

影片中顯示的範例可在此處找到。

特徵

支援數值和符號（例如逗號、點）的動畫過渡。
？可自訂的數位樣式和動畫配置。
？處理緊湊的數字格式（例如，1K、1M 等）。
？透過道具輕鬆客製化。
？支援動畫的減少運動和緩動功能。
？專為常規數字和帶符號（正/負）和逗號的格式化數字而設計。

安裝

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`

如果為 true，則僅對緊湊表示法套用小數精確度 (K/M/B/T)。預設為true 。

例子：

如果fixedOnlyForCompact為true且compactToFixed為2 ，則數字1500將顯示為1.50K ，但數字999將顯示為999 （沒有小數位）。
如果fixedOnlyForCompact為false且compactToFixed為2 ，則數字1500將顯示為1.50K ，數字999將顯示為999.00 。