30 seconds of react native

30 segundos de react-nativo

Colección curada de fragmentos reactos útiles que puede entender en 30 segundos o menos.

• Use Ctrl + F o Command + F para buscar un fragmento.
• Contribuciones bienvenidas, lea la guía de contribución.
• Los fragmentos se escriben en React 16.8.3 , react-nativo 0.59.9 , usando ganchos .

Nota : Este repositorio no tiene afiliación con los 30 segundos originales de código, se basó en 30 segundos de React, pero no tiene afiliación con él

Requisitos previos

Para importar un fragmento a su proyecto, debe importar React y copiar pegar el código JavaScript del componente como este:

 import React from 'react' ;

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

Si hay algún estilo relacionado con su componente, copiarlo a un nuevo archivo con el mismo nombre y la extensión apropiada, luego importarlo así:

 import './MyComponentStyle' ; 

Proyectos relacionados

• 30 segundos de código
• 30 segundos de CSS
• 30 segundos de entrevistas
• 30 segundos de React

Tabla de contenido

Visual

Ver contenido

• Corazón

---

Visual

Corazón

Representa un componente de ticker.

• Use el gancho React.useState() para inicializar la variable de estado ticker a 0 .
• Definir dos métodos, tick y reset , que incrementarán periódicamente timer basado en interval y interval de reinicio, respectivamente.
• Devuelva una <View> con dos elementos <Button> , cada uno de los cuales llama tick y 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 >
  ) ;
}

Ejemplos

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

⬆ De vuelta a la cima

---

Este repositorio es un trabajo en progreso. Si desea contribuir, consulte los problemas abiertos para ver dónde y cómo puede ayudar.

Este ReadMe está construido con Markdown-Builder.