react native element timer

react-native-element-timer

Komponen yang menampilkan timer dan hitung mundur untuk React Native. Diimplementasikan menggunakan react-native-background-timer

Memulai

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

atau

    yarn add react - native - element - timer 

Demo

Alat peraga timer

Alat peraga	Jenis	Isrequire	Keterangan
Dasar Inisial	Nomor	TIDAK	Detik awal, defalut adalah 0
Autostart	Boolean	TIDAK	Pengatur Waktu Mulai Otomatis
awal	Ref.Start ()	Ya	Mulai pengatur waktu
berhenti sebentar	Ref.Pause ()	Ya	Jeda timer
melanjutkan	Ref.resume ()	Ya	Resume timer
berhenti	Ref.stop ()	Ya	Berhenti timer
gaya	View style	TIDAK	Tampilan wadah penataan
FontFamily	Rangkaian	TIDAK	Kustomisasi Gaya Font
TextStyle	TextStyle	TIDAK	Teks Styling
Formattime	HH: MM: SS atau SS	TIDAK	Waktu format
waktu	(detik) => batal	TIDAK	panggilan balik saat menjalankan waktu
Onpause	(detik) => batal	TIDAK	Panggilan balik saat acara jeda dipanggil
Onend	(detik) => batal	TIDAK	Panggilan balik saat acara berhenti dipanggil

Alat peraga Countdown

Alat peraga	Jenis	Isrequire	bawaan
Dasar Inisial	Nomor	Ya	Detik awal
Autostart	Boolean	TIDAK	Pengatur Waktu Mulai Otomatis
awal	Ref.Start ()	Ya	Mulai pengatur waktu
berhenti sebentar	Ref.Pause ()	Ya	Jeda timer
melanjutkan	Ref.resume ()	Ya	Resume timer
berhenti	Ref.stop ()	Ya	Berhenti timer
gaya	View style	TIDAK	Tampilan wadah penataan
FontFamily	Rangkaian	TIDAK	Kustomisasi Gaya Font
TextStyle	TextStyle	TIDAK	Teks Styling
Formattime	HH: MM: SS atau SS	TIDAK	Waktu format
waktu	(detik) => batal	TIDAK	panggilan balik saat menjalankan waktu
Onpause	(detik) => batal	TIDAK	Panggilan balik saat acara jeda dipanggil
Onend	(detik) => batal	TIDAK	Panggilan balik saat acara berhenti dipanggil

Penggunaan

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

Menyumbangkan

Mendukung pemelihara dengan sumbangan dan membantu mereka melanjutkan kegiatan.