访问官网
Github
文档react-native-animated-numbers
在react-native中展示数字变化动画的库
如果你想要React.js的Web版本，请下载react-animated-numbers
安装
yarn add react-native-animated-numbers
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| animateToNumber | number | 无 | 要动画展示的数字 |
| fontStyle | TextStyle? | 无 | 数字文本的样式 |
| animationDuration | number? | 1400(毫秒) | 动画运行的速度 |
| includeComma | boolean? | false | 数字是否包含逗号 |
| easing | Easing? | Easing.elastic(1.2) | React Native动画API中的缓动函数 |
| containerStyle | ViewStyle? | 无 | 容器视图的样式 |
| fontVariant | string[] | ['tabular-nums'] | 字体变体 |
示例
import React from 'react';
import { SafeAreaView, Button } from 'react-native';
import AnimatedNumbers from 'react-native-animated-numbers';
const App = () => {
const [animateToNumber, setAnimateToNumber] = React.useState(7979);
const increase = () => {
setAnimateToNumber(animateToNumber + 1999);
};
return (
<SafeAreaView
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
<AnimatedNumbers
includeComma
animateToNumber={animateToNumber}
fontStyle={{ fontSize: 50, fontWeight: 'bold' }}
/>
<Button title="增加" onPress={increase} />
</SafeAreaView>
);
};
export default App;
截图
