30 seconds of react native

30 Sekunden React-Native

Kuratierte Sammlung nützlicher React -Snippets, die Sie in 30 Sekunden oder weniger verstehen können.

• Verwenden Sie Strg + F oder Befehl + F , um nach einem Ausschnitt zu suchen.
• Beiträge willkommen, bitte lesen Sie den Beitragsleitfaden.
• Snippets sind in React 16,8,3 , React-native 0,59,9 , unter Verwendung von Haken geschrieben.

Hinweis : Dieses Repo hat keine Zugehörigkeit zu den ursprünglichen 30 Sekunden Code, basiert auf 30 Sekunden Reakt

Voraussetzungen

Um ein Snippet in Ihr Projekt zu importieren, müssen Sie den JavaScript-Code der Komponente wie folgt React und kopieren:

 import React from 'react' ;

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

Wenn Ihre Komponente in Bezug auf Ihre Komponente in einer neuen Datei mit demselben Namen und der entsprechenden Erweiterung in eine neue Datei kopiert wird, importieren Sie sie wie folgt:

 import './MyComponentStyle' ; 

Verwandte Projekte

• 30 Sekunden Code
• 30 Sekunden CSS
• 30 Sekunden der Interviews
• 30 Sekunden React

Inhaltsverzeichnis

Visuell

Inhalt anzeigen

• Ticker

---

Visuell

Ticker

Rendert eine Tickerkomponente.

• Verwenden Sie den React.useState() Hook, um die Variable ticker Status auf 0 zu initialisieren.
• Definieren Sie zwei Methoden, tick und reset , die timer regelmäßig auf der Grundlage interval bzw. dem Zurücksetzen interval inkrementieren.
• Geben Sie eine <View> mit zwei <Button> Elementen zurück, von denen jeweils tick bzw. 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 >
  ) ;
}

Beispiele

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

⬆ Zurück nach oben

---

Dieses Repository ist in Arbeit. Wenn Sie einen Beitrag leisten möchten, überprüfen Sie bitte die offenen Probleme, um zu sehen, wo und wie Sie helfen können!

Dieser Readme wurde mit Markdown-Builder erstellt.