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构建的。