30 seconds of react native

30 secondes de réactif-natif

COLLECTION ONTRAGE D'UTILISÉ UTILISÉ REACT SNIPPET que vous pouvez comprendre en 30 secondes ou moins.

• Utilisez Ctrl + F ou Command + F pour rechercher un extrait.
• Contributions bienvenue, veuillez lire le guide de contribution.
• Les extraits sont écrits dans React 16.8.3 , réactif natif 0,59,9 , à l'aide de crochets .

Remarque : ce dépôt n'a aucune affiliation avec les 30 secondes de code d'origine, était basée sur 30 secondes de réaction mais n'a aucune affiliation

Condition préalable

Pour importer un extrait dans votre projet, vous devez importer React et copier-péri le code JavaScript du composant comme ceci:

 import React from 'react' ;

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

S'il y a un style lié à votre composant, copiez-le dans un nouveau fichier avec le même nom et l'extension appropriée, alors importez-le comme ceci:

 import './MyComponentStyle' ; 

Projets connexes

• 30 secondes de code
• 30 secondes de CSS
• 30 secondes d'interviews
• 30 secondes de réaction

Table des matières

Visuel

Afficher le contenu

• Téléscripteur

---

Visuel

Téléscripteur

Rend un composant de ticker.

• Utilisez le crochet React.useState() pour initialiser la variable d'état ticker à 0 .
• Définissez deux méthodes, tick et reset , qui augmentera périodiquement timer en fonction de interval et interval de réinitialisation respectivement.
• Renvoyez un <View> avec deux éléments <Button> , chacun appelant respectivement tick et reset respectivement.

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

Exemples

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

⬆ Retour en haut

---

Ce référentiel est un travail en cours. Si vous souhaitez contribuer, veuillez consulter les problèmes ouverts pour voir où et comment vous pouvez aider!

Cette lecture est construite à l'aide de Markdown-Builder.