React-native-reanimated-numbers NPM

react-native-reanimated-numbers

react native library shows animation when numbers change, powered by reanimated

Important

限制了最小 react-native 版本和 reanimated 版本

"react-native-reanimated": "3.6.0"

"react-native": "0.72.5"

reanimated 的安装，请参考官方文档

demo_gif

Installation

npm install react-native-reanimated-numbers


yarn add react-native-reanimated-numbers

Usage

import AnimatedNumber from 'react-native-reanimated-numbers';

// ...

const [animateToNumber, setAnimateToNumber] = React.useState(18888);

<AnimatedNumber
  animateToNumber={animateToNumber}
  fontStyle={{
    fontSize: 30,
  }}
  onAnimationFinished={() => {
    Alert.alert('Animation finished');
  }}
/>;

<Button
  title="Animate"
  onPress={() => setAnimateToNumber(Math.floor(Math.random() * 10000))}
/>;

Props

Prop Name	Type	Default Value	Description
animateToNumber	number		需要动画效果到达的数值。
fontStyle	StyleProp	undefined	文本样式属性，可以是任何 Text 组件有效的 StyleProp。
animationDuration	number	1300	动画持续时间（毫秒）。
easing	EasingFunction \| EasingFunctionFactory	Easing.elastic(1.2)	控制动画节奏的缓动函数。
onReady	() => void	undefined	组件准备完毕时的回调函数。
emptyText	string \| number	undefined	当没有内容时显示的文本或数值。
onAnimationFinished	() => void	undefined	动画完成后的回调函数。

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

react-native ios android

react-native lodash.isequal react-native-reanimated

0.2.0

2 years ago