react native element timer

React-native-Elemer-Timer

Um componente que exibe um cronômetro e uma contagem regressiva para o React Native. Implementado usando react-native-background-timer

Começando

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

ou

    yarn add react - native - element - timer 

Demonstração

Adereços do timer

Adereços	Tipo	Isrequire	Descrição
Initiais segundos	Número	Não	Segundos iniciais, Defalut é 0
AutoStart	Booleano	Não	Timer de início automático
começar	ref.start ()	Sim	Iniciar o temporizador
pausa	ref.Pause ()	Sim	PAUSE TIMER
retomar	ref.resume ()	Sim	Currículo timer
parar	ref.stop ()	Sim	Pare o temporizador
estilo	ViewStyle	Não	Visualização de contêiner de estilo
Fontfamily	Corda	Não	Personalize o estilo de fonte
TextStyle	TextStyle	Não	Texto de estilo
FormatTime	HH: MM: SS ou SS	Não	Tempo de formato
na hora	(segundos) => void	Não	retorno de chamada ao tempo de execução
OnPause	(segundos) => void	Não	Retorno de chamada quando o evento de pausa é chamado
ONEND	(segundos) => void	Não	Retorno de chamada quando o evento de parada é chamado

Adeços de contagem regressiva

Adereços	Tipo	Isrequire	padrão
Initiais segundos	Número	Sim	Segundos iniciais
AutoStart	Booleano	Não	Timer de início automático
começar	ref.start ()	Sim	Iniciar o temporizador
pausa	ref.Pause ()	Sim	PAUSE TIMER
retomar	ref.resume ()	Sim	Currículo timer
parar	ref.stop ()	Sim	Pare o temporizador
estilo	ViewStyle	Não	Visualização de contêiner de estilo
Fontfamily	Corda	Não	Personalize o estilo de fonte
TextStyle	TextStyle	Não	Texto de estilo
FormatTime	HH: MM: SS ou SS	Não	Tempo de formato
na hora	(segundos) => void	Não	retorno de chamada ao tempo de execução
OnPause	(segundos) => void	Não	Retorno de chamada quando o evento de pausa é chamado
ONEND	(segundos) => void	Não	Retorno de chamada quando o evento de parada é chamado

Uso

    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 ,
        } ,
    } ) ; 

Doar

Apoie os mantenedores com uma doação e ajude -os a continuar com as atividades.