30 seconds of react native

30 секунд реаги-родного

Куративная коллекция полезных фрагментов React, которые вы можете понять за 30 секунд или меньше.

• Используйте Ctrl + F или команду + F для поиска фрагмента.
• Взносы
• Фрагменты написаны в React 16.8.3 , React-Clination 0,59,9 , используя крючки .

Примечание . Этот репо не имеет никакого отношения к первоначальным 30 секунд кода, была основана на 30 секунд React, но не имеет никакого отношения к нему вообще

Предварительные условия

Чтобы импортировать фрагмент в ваш проект, вы должны импортировать React и копировать код JavaScript Компонента, как это:

 import React from 'react' ;

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

Если есть какой-либо стиль, связанный с вашим компонентом, скопируйте его в новый файл с тем же именем и соответствующим расширением, то импортируйте его так:

 import './MyComponentStyle' ; 

Связанные проекты

• 30 секунд кода
• 30 секунд CSS
• 30 секунд интервью
• 30 секунд реагирования

Оглавление

Визуальный

Посмотреть содержимое

• Тикер

---

Визуальный

Тикер

Рендерирует компонент тикера.

• Используйте крючок React.useState() , чтобы инициализировать переменную состояния ticker до 0 .
• Определите два метода, tick и reset , которые периодически будут увеличивать timer на основе interval и interval сброса соответственно.
• Верните <View> с двумя элементами <Button> , каждый из которых вызывает 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 } />

⬆ Вернуться к вершине

---

Этот репозиторий находится в стадии разработки. Если вы хотите внести свой вклад, пожалуйста, проверьте открытые проблемы, чтобы увидеть, где и как вы можете помочь!

Этот Readme построен с использованием Markdown-Builder.