// Импорт разных файлов
import * as React from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import { Constants } from 'expo';
import AssetExample from './components/AssetExample';
// Создание таблицы стилей
const styles = StyleSheet.create({
appContainer : {
flex :1 ,
alignItems : 'center',
justifyContent : 'center',
},
text : {
fontSize : 40 ,
}
})
export class App extends React.Component{
// Создание функции конструктора и установка состояния здесь
constructor(props)
{
super(props)
this.state = ({
minutes : 0,
seconds : 4,
pause : false,
})
}
// Функция запуска таймера для минут и, если она уменьшается на 1, то автоматически устанавливается состояние секунд.
startTimer = () => {
this.setState({
minutes : this.state.minutes - 1,
seconds : 4
})
}
// Таймер 2 для уменьшения секунд на 1 каждый момент.
startTimer2 = () => {
this.setState({
seconds : this.state.seconds - 1
})
console.log(this.props.toggle)
}
// Здесь устанавливается интервал для обоих таймеров.
componentDidMount = () => {
this.interval = setInterval(this.startTimer , 5000)
this.interval2 = setInterval(this.startTimer2 , 1000)
}
// Не обновлять, если минуты становятся меньше нуля.
shouldComponentUpdate = (nextProps , nextState) => {
if(nextState.minutes >= 0 )
{
return(
true
)
}
// ПРОСТО очищать INterval, если он становится ниже
else {
clearInterval(this.interval)
clearInterval(this.interval2)
}
}
// Компонент будет размонтирован
componentWillUnmount = () => {
clearInterval(this.interval)
clearInterval(this.interval2)
}
// Переключатель для приостановки времени
pauseTimer = ()=> {
this.setState({
pause : !this.state.pause
})
}
// Функция рендеринга
render() {
if(this.state.minutes === 0 && this.state.seconds === 0)
{
return(
<View style = {styles.appContainer}>
<Text style ={styles.text}>
Break is over
</Text>
</View>
)
}
else if (this.state.pause === false)
{
return (
<View style = {styles.appContainer}>
<Text style ={styles.text}>
{this.state.minutes} : {this.state.seconds}
</Text>
<Button title = "Pause" onPress = {()=>this.pauseTimer()}
/>
</View>
)
}
else {
return (
<View style = {styles.appContainer}>
<Text style ={styles.text}>
{this.state.minutes} : {this.state.seconds}
Paused
</Text>
<Button title = "Start again" onPress = {()=>this.pauseTimer()}/>
</View>
)
}
}