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 。