30 seconds of react native

30 วินาทีของการตอบสนอง

คอลเลกชันของตัวอย่างปฏิกิริยาที่มีประโยชน์ที่คุณสามารถเข้าใจได้ภายใน 30 วินาทีหรือน้อยกว่า

• ใช้ ctrl + f หรือ คำสั่ง + f เพื่อค้นหาตัวอย่าง
• ยินดีต้อนรับการมีส่วนร่วมโปรดอ่านคู่มือการบริจาค
• ตัวอย่างถูกเขียนใน React 16.8.3 , React-Native 0.59.9 โดยใช้ ตะขอ

หมายเหตุ : repo นี้ไม่มีส่วนเกี่ยวข้องกับรหัส 30 วินาทีดั้งเดิมขึ้นอยู่กับการตอบสนอง 30 วินาที แต่ไม่มีส่วนเกี่ยวข้องใด ๆ

ข้อกำหนดเบื้องต้น

ในการนำเข้าตัวอย่างลงในโครงการของคุณคุณต้องนำเข้า React และคัดลอกรหัส JavaScript ของส่วนประกอบเช่นนี้:

 import React from 'react' ;

function MyComponent ( props ) {
  /* ... */
}

หากมีสไตล์ใด ๆ ที่เกี่ยวข้องกับส่วนประกอบของคุณให้คัดลอกวางไปยังไฟล์ใหม่ที่มีชื่อเดียวกันและส่วนขยายที่เหมาะสมจากนั้นนำเข้าเช่นนี้:

 import './MyComponentStyle' ; 

โครงการที่เกี่ยวข้อง

• รหัส 30 วินาที
• 30 วินาทีของ CSS
• สัมภาษณ์ 30 วินาที
• ตอบสนอง 30 วินาที

สารบัญ

ภาพ

ดูเนื้อหา

• นักแสดง

---

ภาพ

นักแสดง

แสดงผลองค์ประกอบของทิกเกอร์

• ใช้ React.useState() hook เพื่อเริ่มต้นตัวแปรสถานะ ticker เป็น 0
• กำหนดสองวิธีคือ tick และ reset ซึ่งจะเพิ่ม timer เป็นระยะตาม interval และ interval รีเซ็ตตามลำดับ
• ส่งคืน <View> ด้วยองค์ประกอบ <Button> สององค์ประกอบซึ่งแต่ละรายการเรียก tick และ reset ตามลำดับ

 function Ticker ( props ) {
  const [ ticker , setTicker ] = React . useState ( 0 ) ;
  let interval = null ;

  const tick = ( ) => {
    reset ( ) ;
    interval = setInterval ( ( ) => {
      if ( ticker < props . times ) setTicker ( ticker + 1 ) ;
      else clearInterval ( interval ) ;
    } , props . interval ) ;
  } ;

  const reset = ( ) => {
    setTicker ( 0 ) ;
    clearInterval ( interval ) ;
  } ;

  return (
    < View >
      < Text style = { { fontSize : 100 } } > { ticker } </ Text >
      < Button onPress = { tick } title = "Tick!" />
      < Button onPress = { reset } title = "Reset!" />
    </ View >
  ) ;
}

ตัวอย่าง

 < Ticker times = { 5 } interval = { 1000 } />

⬆กลับไปด้านบน

---

ที่เก็บนี้เป็นงานที่กำลังดำเนินการ หากคุณต้องการมีส่วนร่วมโปรดตรวจสอบปัญหาเปิดเพื่อดูว่าคุณจะช่วยได้ที่ไหนและอย่างไร!

readme นี้สร้างขึ้นโดยใช้ Markdown-Builder