Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const WORK_TIME = 10
- const DEVICE = {...Dimensions.get('window')}
- class TimerButton extends React.PureComponent {
- render() {
- return (
- <TouchableOpacity onPress={this.props.onPress} style={styles.button} activeOpacity={0.7}>
- <Text style={styles.buttonText}>{this.props.title}</Text>
- </TouchableOpacity>
- )
- }
- }
- export default class App extends React.Component {
- state = {
- time: WORK_TIME,
- value: new Animated.Value(0)
- }
- start = () => {
- if (!this._interval) {
- Animated.timing(this.state.value, {
- toValue: WORK_TIME,
- duration: WORK_TIME * 1000,
- }).start()
- this._interval = setInterval(() => {
- if (this.state.time === 0) {
- alert('Пора отдохнуть!')
- this.reset();
- } else {
- this.setState({time: this.state.time - 1})
- }
- }, 1000)
- }
- }
- stop = () => {
- this.state.value.stopAnimation();
- clearInterval(this._interval);
- this._interval = null;
- }
- reset = () => {
- this.setState({ time: WORK_TIME, value: new Animated.Value(0) })
- this.stop()
- }
- render() {
- let minutes = this.state.time / 60;
- minutes = Math.floor(minutes);
- let seconds = this.state.time % 60;
- seconds = seconds >= 10 ? seconds : `0${seconds}`
- minutes = minutes >= 10 ? minutes : `0${minutes}`
- let rotate = this.state.value.interpolate({
- inputRange: [0, WORK_TIME],
- outputRange: ["0deg", "3600deg"]
- })
- return (
- <View style={styles.container}>
- <Animated.View style={{ transform: [ { rotateZ: rotate } ] }} >
- <Image
- source={{ uri: "https://opencollective-production.s3-us-west-1.amazonaws.com/524dec00-39e2-11e7-a19f-69aad0543ddc.png" }}
- style={{ width: 150, height: 150 }}
- />
- </Animated.View>
- <Text style={styles.text}>{`${minutes}:${seconds}`}</Text>
- <View style={styles.buttons}>
- <TimerButton title='Start' onPress={this.start} />
- <TimerButton title='Stop' onPress={this.stop} />
- <TimerButton title='Reset' onPress={this.reset} />
- </View>
- </View>
- )
- }
- }
- const styles = StyleSheet.create({
- line: {
- alignSelf: 'flex-start',
- backgroundColor: 'red',
- height: 40
- },
- img: {
- alignSelf: 'center',
- height: 100,
- width: 100,
- borderRadius: 40,
- },
- container: {
- flex: 1,
- backgroundColor: "steelblue",
- justifyContent: "center",
- alignItems: "center"
- },
- text: {
- fontSize: 46,
- fontWeight: '600',
- letterSpacing: 3
- },
- buttons: {
- height: 300,
- justifyContent: "space-evenly"
- },
- buttonText: {
- fontSize: 24,
- fontWeight: '400',
- letterSpacing: 3
- },
- button: {
- borderRadius: 4,
- backgroundColor: "rgba(0, 0, 0, 0.3)",
- width: 200,
- height: 50,
- justifyContent: "center",
- alignItems: "center"
- }
- })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement