react native element timer

temporizador de elemento-nativo

Un componente que muestra un temporizador y una cuenta regresiva para React Native. Implementado utilizando react-native-background-timer

Empezando

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

o

    yarn add react - native - element - timer 

Manifestación

Accesorios de temporizador

Accesorios	Tipo	Isrequire	Descripción
Segundos iniciales	Número	No	Segundos iniciales, Defalut es 0
autostart	Booleano	No	Temporizador de inicio automático
comenzar	Ref.Start ()	Sí	Temporizador de inicio
pausa	Ref.Pause ()	Sí	Temporizador de pausa
reanudar	Ref.Resume ()	Sí	Temporizador de reanudación
detener	Ref.stop ()	Sí	Temporizador de detención
estilo	Vista de estilo	No	Vista de contenedor de estilo
huella	Cadena	No	Personalizar el estilo de fuente
estilo de texto	Estilo de texto	No	Texto de estilo
simulacro	HH: MM: SS o SS	No	Tiempo de formato
tiempos	(segundos) => nulo	No	devolución de llamada al tiempo de ejecución
puta	(segundos) => nulo	No	Devolución de llamada cuando se llama al evento de pausa
aparecer	(segundos) => nulo	No	Devolución de llamada cuando se llama al evento de parada

Accesorios de cuenta regresiva

Accesorios	Tipo	Isrequire	por defecto
Segundos iniciales	Número	Sí	Segundos iniciales
autostart	Booleano	No	Temporizador de inicio automático
comenzar	Ref.Start ()	Sí	Temporizador de inicio
pausa	Ref.Pause ()	Sí	Temporizador de pausa
reanudar	Ref.Resume ()	Sí	Temporizador de reanudación
detener	Ref.stop ()	Sí	Temporizador de detención
estilo	Vista de estilo	No	Vista de contenedor de estilo
huella	Cadena	No	Personalizar el estilo de fuente
estilo de texto	Estilo de texto	No	Texto de estilo
simulacro	HH: MM: SS o SS	No	Tiempo de formato
tiempos	(segundos) => nulo	No	devolución de llamada al tiempo de ejecución
puta	(segundos) => nulo	No	Devolución de llamada cuando se llama al evento de pausa
aparecer	(segundos) => nulo	No	Devolución de llamada cuando se llama al evento de parada

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

Donar

Apoye a los mantenedores con una donación y los ayude a continuar con las actividades.