30 seconds of react native

30 ثانية من رد الفعل الأصلي

مجموعة منسقة من مقتطفات React المفيدة التي يمكنك فهمها في 30 ثانية أو أقل.

• استخدم Ctrl + F أو Command + F للبحث عن مقتطف.
• ترحيب المساهمات ، يرجى قراءة دليل المساهمة.
• تتم كتابة المقتطفات في React 16.8.3 ، REACT-NATITION 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 على التوالي.
• ارجع A <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.