30 seconds of react native

30 segundos de react-nativo

Coleção com curadoria de trechos de reação úteis que você pode entender em 30 segundos ou menos.

• Use Ctrl + F ou Command + F para procurar um snippet.
• Contribuições Bem -vindas, leia o guia de contribuição.
• Os trechos são escritos no React 16.8.3 , react-nativo 0,59,9 , usando ganchos .

Nota : Este repositório não tem afiliação com os 30 segundos originais de código, foi baseado em 30 segundos de reação, mas não tem afiliação a ele

Pré -requisitos

Para importar um trecho para o seu projeto, você deve importar React e copiar o código JavaScript do componente como este:

 import React from 'react' ;

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

Se houver algum estilo relacionado ao seu componente, copie-o para um novo arquivo com o mesmo nome e a extensão apropriada e importe-o assim:

 import './MyComponentStyle' ; 

Projetos relacionados

• 30 segundos de código
• 30 segundos de CSS
• 30 segundos de entrevistas
• 30 segundos de reação

Índice

Visual

Ver conteúdo

• Ticker

---

Visual

Ticker

Renderiza um componente de ticker.

• Use o gancho React.useState() para inicializar a variável de estado ticker para 0 .
• Defina dois métodos, tick e reset , que incrementam periodicamente timer com base no interval e interval de redefinição, respectivamente.
• Retorne um <View> com dois elementos <Button> , cada um dos quais chama tick e reset , respectivamente.

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

Exemplos

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

⬆ de volta ao topo

---

Este repositório é um trabalho em andamento. Se você deseja contribuir, verifique os problemas abertos para ver onde e como você pode ajudar!

Este readme é construído usando o Markdown-Builder.