react native element timer

react-native-etimer

ส่วนประกอบที่แสดงตัวจับเวลาและการนับถอยหลังสำหรับ React Native ดำเนินการโดยใช้ react-native-background-timer

เริ่มต้น

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

หรือ

    yarn add react - native - element - timer 

การสาธิต

อุปกรณ์ประกอบฉากจับเวลา

อุปกรณ์ประกอบฉาก	พิมพ์	ISRequire	คำอธิบาย
ข้อสรุป	ตัวเลข	เลขที่	วินาทีเริ่มต้น defalut คือ 0
การเริ่มต้นอัตโนมัติ	บูลีน	เลขที่	ตัวจับเวลาเริ่มอัตโนมัติ
เริ่ม	Ref.Start ()	ใช่	เริ่มจับเวลา
หยุดชั่วคราว	Ref.Pause ()	ใช่	ตัวจับเวลาหยุดชั่วคราว
ประวัติย่อ	Ref.Resume ()	ใช่	ตัวจับเวลาประวัติย่อ
หยุด	Ref.Stop ()	ใช่	หยุดจับเวลา
สไตล์	ViewStyle	เลขที่	มุมมองคอนเทนเนอร์สไตล์
fontfamily	สาย	เลขที่	ปรับแต่งรูปแบบตัวอักษร
สไตล์ข้อความ	สไตล์ข้อความ	เลขที่	ข้อความจัดแต่งทรงผม
รูปแบบ	HH: MM: SS หรือ SS	เลขที่	จัดรูปแบบเวลา
เวลาหนึ่ง	(วินาที) => โมฆะ	เลขที่	โทรกลับเมื่อเวลาทำงาน
onpause	(วินาที) => โมฆะ	เลขที่	โทรกลับเมื่อมีการเรียกเหตุการณ์หยุดชั่วคราว
ต่อ	(วินาที) => โมฆะ	เลขที่	โทรกลับเมื่อมีการเรียกเหตุการณ์หยุด

อุปกรณ์ประกอบฉากนับถอยหลัง

อุปกรณ์ประกอบฉาก	พิมพ์	ISRequire	ค่าเริ่มต้น
ข้อสรุป	ตัวเลข	ใช่	วินาทีแรก
การเริ่มต้นอัตโนมัติ	บูลีน	เลขที่	ตัวจับเวลาเริ่มอัตโนมัติ
เริ่ม	Ref.Start ()	ใช่	เริ่มจับเวลา
หยุดชั่วคราว	Ref.Pause ()	ใช่	ตัวจับเวลาหยุดชั่วคราว
ประวัติย่อ	Ref.Resume ()	ใช่	ตัวจับเวลาประวัติย่อ
หยุด	Ref.Stop ()	ใช่	หยุดจับเวลา
สไตล์	ViewStyle	เลขที่	มุมมองคอนเทนเนอร์สไตล์
fontfamily	สาย	เลขที่	ปรับแต่งรูปแบบตัวอักษร
สไตล์ข้อความ	สไตล์ข้อความ	เลขที่	ข้อความจัดแต่งทรงผม
รูปแบบ	HH: MM: SS หรือ SS	เลขที่	จัดรูปแบบเวลา
เวลาหนึ่ง	(วินาที) => โมฆะ	เลขที่	โทรกลับเมื่อเวลาทำงาน
onpause	(วินาที) => โมฆะ	เลขที่	โทรกลับเมื่อมีการเรียกเหตุการณ์หยุดชั่วคราว
ต่อ	(วินาที) => โมฆะ	เลขที่	โทรกลับเมื่อมีการเรียกเหตุการณ์หยุด

การใช้งาน

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

บริจาค

สนับสนุนผู้ดูแลด้วยการบริจาคและช่วยให้พวกเขาดำเนินกิจกรรมต่อไป