react native element timer

React-Cnive-Element-Timer

Компонент, который отображает таймер и обратный отсчет для RACE Native. Реализовано с использованием React-Can-Background-Timer

Начиная

    npm install react - native - element - timer -- save

или

    yarn add react - native - element - timer 

Демо

Таймер реквизит

Реквизит	Тип	Isrequire	Описание
инициалисты	Число	Нет	Начальные секунды Defalut - 0
AutoStart	Логический	Нет	Автоматический таймер
начинать	ref.start ()	Да	Начать таймер
пауза	ref.pause ()	Да	Пауза таймер
резюме	ref.resume ()	Да	Резюме таймер
останавливаться	ref.stop ()	Да	Остановить таймер
стиль	Просмотр	Нет	Стилирование контейнера
Фонфимилия	Нить	Нет	Настройте стиль шрифта
текстовый стиль	Текстовый стиль	Нет	Текст стиля
формата	HH: MM: SS или SS	Нет	Время формата
время	(секунды) => void	Нет	обратный вызов во время работы
OnPause	(секунды) => void	Нет	Обратный вызов при вызове паузы
onend	(секунды) => void	Нет	Обратный вызов при вызове события Stop

Обратный отсчет реквизит

Реквизит	Тип	Isrequire	по умолчанию
инициалисты	Число	Да	Начальные секунды
AutoStart	Логический	Нет	Автоматический таймер
начинать	ref.start ()	Да	Начать таймер
пауза	ref.pause ()	Да	Пауза таймер
резюме	ref.resume ()	Да	Резюме таймер
останавливаться	ref.stop ()	Да	Остановить таймер
стиль	Просмотр	Нет	Стилирование контейнера
Фонфимилия	Нить	Нет	Настройте стиль шрифта
текстовый стиль	Текстовый стиль	Нет	Текст стиля
формата	HH: MM: SS или SS	Нет	Время формата
время	(секунды) => void	Нет	обратный вызов во время работы
OnPause	(секунды) => void	Нет	Обратный вызов при вызове паузы
onend	(секунды) => void	Нет	Обратный вызов при вызове события Stop

Использование

    import React , { useRef } from 'react' ;
    import { StyleSheet , Button , Text , SafeAreaView } from 'react-native' ;
    import { Timer , Countdown } from 'react-native-element-timer' ;

    const TimerScreen = _props => {
        const timerRef = useRef ( null ) ;
        const countdownRef = useRef ( null ) ;

        return (
            < SafeAreaView style = { styles . container } >
                < Text style = { styles . text } > Timer: </ Text >
                < Timer
                    ref = { timerRef }
                    style = { styles . timer }
                    textStyle = { styles . timerText }
                    onTimes = { e => { } }
                    onPause = { e => { } }
                    onEnd = { e => { } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Start' }
                    onPress = { ( ) => {
                        timerRef . current . start ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Pause' }
                    onPress = { ( ) => {
                        timerRef . current . pause ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Resume' }
                    onPress = { ( ) => {
                        timerRef . current . resume ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Stop' }
                    onPress = { ( ) => {
                        timerRef . current . stop ( ) ;
                    } }
                />

                < Text style = { styles . text } > Countdown: </ Text >
                < Countdown
                    ref = { countdownRef }
                    style = { styles . timer }
                    textStyle = { styles . timerText }
                    initialSeconds = { 5 }
                    onTimes = { e => { } }
                    onPause = { e => { } }
                    onEnd = { ( e ) => { } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Start' }
                    onPress = { ( ) => {
                        countdownRef . current . start ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Pause' }
                    onPress = { ( ) => {
                        countdownRef . current . pause ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Resume' }
                    onPress = { ( ) => {
                        countdownRef . current . resume ( ) ;
                    } }
                />
                < Button
                    style = { styles . button }
                    title = { 'Stop' }
                    onPress = { ( ) => {
                        countdownRef . current . stop ( ) ;
                    } }
                />
            </ SafeAreaView >
        ) ;
    } ;

    export default TimerScreen ;

    const styles = StyleSheet . create ( {
        container : {
            flex : 1 ,
            alignItems : 'center' ,
            padding : 20 ,
        } ,
        text : {
            fontWeight : 'bold' ,
            fontSize : 16 ,
            marginTop : 40 ,
        } ,
        timer : {
            marginVertical : 10 ,
        } ,
        timerText : {
            fontSize : 20 ,
        } ,
        button : {
            marginVertical : 5 ,
            backgroundColor : 'white' ,
            borderRadius : 24 ,
            width : 100 ,
        } ,
    } ) ; 

Пожертвовать

Поддерживайте сопровождающих с пожертвованием и помогите им продолжить деятельность.