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カスタマイズ可能なスタイルとアニメーションを使用して数字とコンパクト表記法 (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 インストール。

使用法

基本的な例

 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として表示されます。