30 seconds of react native

30秒的反應本地

策劃的有用的反應片段收集，您可以在30秒或更短的時間內理解。

• 使用CTRL + F或命令+ F搜索摘要。
• 歡迎捐款，請閱讀貢獻指南。
• 摘要用鉤子用鉤子編寫為16.8.3 ， react-native 0.59.9 。

注意：此存儲庫與原始代碼的原始代碼無隸屬關係，是基於30秒的React，但與此均無隸屬關係

先決條件

要將片段導入您的項目，您必須導入React並複制組件的JavaScript代碼：

 import React from 'react' ;

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

如果與您的組件相關的任何樣式，請將其複製到具有相同名稱和適當擴展名的新文件，然後以這樣的方式導入：

 import './MyComponentStyle' ; 

相關項目

• 代碼30秒
• CSS的30秒
• 面試的30秒
• 30秒的反應

目錄

視覺的

查看內容

• 股票

---

視覺的

股票

呈現一個股票組件。

• 使用React.useState()鉤將ticker狀態變量初始化為0 。
• 定義兩種方法， tick和reset ，它們將分別基於interval和重置interval定期增加timer 。
• 用兩個<Button>元素返回<View> ，每個元素分別調用tick並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 } />

⬆回到頂部

---

該存儲庫是一項正在進行的工作。如果您想做出貢獻，請檢查公開問題，以查看在哪里以及如何提供幫助！

此讀數是使用Markdown-Builder構建的。