推荐一款高性能React Native计时器组件:react-native-animated-stopwatch-timer
warning:
这篇文章距离上次修改已过190天,其中的内容可能已经有所变动。
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import StopwatchTimer from 'react-native-animated-stopwatch-timer';
export default class TimerExample extends React.Component {
render() {
return (
<View style={styles.container}>
<StopwatchTimer
size={100}
color="#000000"
backgroundColor="#FFFFFF"
seconds={0}
hours={0}
minutes={0}
secondsIntervalInMillis={1000}
onTick={(d) => console.log(d.hours + ':' + d.minutes + ':' + d.seconds)}
onFinish={() => console.log('Timer finished!')}
running={true}
renderTitle={({hours, minutes, seconds}) => (
<Text style={styles.title}>
{hours}:{minutes}:{seconds}
</Text>
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
这段代码演示了如何在React Native应用程序中使用react-native-animated-stopwatch-timer
组件创建一个计时器。它包括计时器的基本设置,如颜色、大小和初始时间,以及如何自定义计时器的渲染和响应每一秒的变化。
评论已关闭