react native animated rolling numbers 다운로드 - react native animated rolling numbers 소스 코드 다운로드

react native animated rolling numbers

기타 소스코드

v1.0.2

다운로드

React 네이티브 애니메이션 롤링 번호

react-native-animated-rolling-numbers 는 사용자 정의 가능한 스타일과 애니메이션으로 숫자와 간단한 표기법(K, M, B, T)에 애니메이션을 적용하는 React Native 구성 요소입니다. 숫자 값 사이에 부드럽고 눈길을 끄는 전환을 생성하도록 설계되었습니다.

읽어보기.mp4

비디오에 표시된 예는 여기에서 확인할 수 있습니다.

특징

숫자 값 및 기호(예: 쉼표, 점)에 대한 애니메이션 전환을 지원합니다.
? 사용자 정의 가능한 숫자 스타일 및 애니메이션 구성.
? 압축 숫자 형식(예: 1K, 1M 등)을 처리합니다.
? 소품을 통해 쉽게 사용자 정의할 수 있습니다.
? 애니메이션에 대한 모션 감소 및 완화 기능을 지원합니다.
? 일반 숫자와 기호(양수/음수) 및 쉼표가 있는 서식이 지정된 숫자용으로 설계되었습니다.

설치

npm install react-native-animated-rolling-numbers
# or
yarn add react-native-animated-rolling-numbers

프로젝트에 react-native-reanimated 설치되어 있는지 확인하십시오. 여기 공식 설치 가이드를 따르세요: React-Native-Reanimated Installation.

용법

기본 예

 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 으로 표시됩니다.