30 seconds of react native

30秒のReact-Native

30秒以内に理解できる有用な反応スニペットのキュレーションコレクション。

• ctrl + fまたはcommand + fを使用して、スニペットを検索します。
• 貢献を歓迎してください。コントローションガイドをお読みください。
• スニペットは、フックを使用して、 React 16.8.3 、 React-Native 0.59.9で書かれています。

注：このレポは、元の30秒のコードとの関係はありませんが、30秒の反応に基づいていましたが、それとはまったく関係ありません

前提条件

プロジェクトにスニペットをインポートするには、 Reactをインポートして、このようなコンポーネントのJavaScriptコードをコピーする必要があります。

 import React from 'react' ;

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

コンポーネントに関連するスタイルがある場合は、同じ名前と適切な拡張機能を持つ新しいファイルにコピーして、次のようにインポートします。

 import './MyComponentStyle' ; 

関連プロジェクト

• 30秒のコード
• 30秒のCSS
• 30秒のインタビュー
• 30秒の反応

目次

ビジュアル

内容を表示します

• ティッカー

---

ビジュアル

ティッカー

ティッカーコンポーネントをレンダリングします。

• React.useState()フックを使用して、 ticker状態変数を0に初期化します。
• それぞれintervalとリセットintervalに基づいて定期的にtimerをインクリメントする2つのメソッド、 tickとresetを定義します。
• 2つの<Button>要素を使用しtick <View>返し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 } />

topに戻ります

---

このリポジトリは進行中の作業です。貢献したい場合は、オープンな問題を確認して、どこでどのように支援できるかを確認してください！

このREADMEは、Markdown-Builderを使用して構築されています。