30 seconds of react native

30 초의 반응-네이티브

30 초 이내에 이해할 수있는 유용한 반응 스 니펫의 선별 된 모음.

• Snippet을 검색하려면 Ctrl + F 또는 Command + F 를 사용하십시오.
• 기부금을 환영합니다. 기여 가이드를 읽으십시오.
• 스 니펫은 후크를 사용하여 React 16.8.3 , React Native 0.59.9 로 작성됩니다.

참고 :이 repo는 원래 30 초의 코드와 제휴가 없으며 30 초의 React를 기반으로했지만 그와 관련된 제휴는 없습니다.

전제 조건

스 니펫을 프로젝트로 가져 오려면 React 가져 와서 컴포지트-포트로 구성 요소의 JavaScript 코드를 다음과 같이 복사해야합니다.

 import React from 'react' ;

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

구성 요소와 관련된 스타일이 있으면 이름과 적절한 확장자가 동일한 새 파일로 복사 한 다음 다음과 같이 가져옵니다.

 import './MyComponentStyle' ; 

관련 프로젝트

• 30 초의 코드
• CS의 30 초
• 30 초의 인터뷰
• 30 초의 반응

목차

시각적

내용을 봅니다

• 증권 시세 표시기

---

시각적

증권 시세 표시기

티커 구성 요소를 렌더링합니다.

• React.useState() 후크를 사용하여 ticker 상태 변수를 0 으로 초기화하십시오.
• interval 및 재설정 interval 기반으로 각각 timer 늘리는 두 가지 방법의 tick 및 reset 정의하십시오.
• 두 개의 <Button> 요소로 <View> 반환하며, 각각은 각각 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를 사용하여 구축되었습니다.