react native slider intro

؟ React-Native-Slider-Intro

حزمة React Native بسيطة وقابلة للتخصيص والتي تنفذ شريط منزلق فريد.

تثبيت

yarn add react-native-slider-intro

أو

npm install react-native-slider-intro --save

تشغيل مشروع المثال

iOS

yarn example ios

Android

yarn example android

الاستخدام

مثال أساسي

 import React from 'react' ;
import SliderIntro from 'react-native-slider-intro' ;

const slides = [
  {
    index : 1 ,
    title : 'First step' ,
    text : 'Simple description.' ,
    link : 'https://pccontroller.rnstudio.hu' ,
    image : require ( './images/step1.png' ) ,
    backgroundColor : '#febe29' ,
  } ,
  {
    index : 2 ,
    title : 'Second step' ,
    text : 'Simple description for the second step.' ,
    image : require ( './images/step2.png' ) ,
    backgroundColor : '#febe29' ,
  } ,
] ;

const BasicExample = ( { closeExample } : { closeExample : ( ) => void } ) => {
  return (
    < SliderIntro data = { slides } onDone = { closeExample } onSkip = { closeExample } / >
  ) ;
} ;

export default BasicExample ;

تتضمن الحزمة خيارين عرض. إلى جانب default render عندما يمكنك تمرير data كمجموعة من الدعائم SliderIntroiTemProps ، يمكنك استخدام custom render مع خصائص children وخصائص numberOfSlides .

ملكيات

اسم	يكتب	القيمة الافتراضية	وصف
data	صفيف	[]	Default render - مجموعة من العناصر. سيتم تجاهل الأطفال إذا تم تمرير البيانات.
numberOfSlides	صفيف	رقم	Custom render - إذا تم تمرير الأطفال ، سيتم تجاهل البيانات. مطلوب NumberOfSlides في هذه الحالة.
children	رد فعل	باطل	Custom render - عناصر JSX لتقديمها.
navigationBarBottom	رقم	0	القيمة المخصصة لموضع حاوية التنقل في نقطة التنقل
navigationBarHeight	رقم	70	ارتفاع حاوية الملاحة النقطة
animateSlideSpeed	رقم	15	سرعة الانزلاق الرسوم المتحركة
navContainerMaxSizePercent	رقم	0.5	مئوية قيمة عرض حاوية الملاحة
dotWidth	رقم	12	نصف قطر دائرة الملاحة "النقطة"
fixDotOpacity	رقم	0.35	كل نقاط عتامة ليس لديها رسوم متحركة
fixDotBackgroundColor	لون	رمادي	كل خلفية نقاط لا تحتوي على رسوم متحركة
animatedDotBackgroundColor	لون	أبيض	كل خلفية نقاط لها الرسوم المتحركة
animateDotSpeed	رقم	8	سرعة الرسوم المتحركة النقطة
animateDotBouncing	رقم	2	قيمة "الرهان" لجميع الرسوم المتحركة. https://reactnative.dev/docs/animated#spring
hasReactNavigation	منطقية	خطأ شنيع	هناك مشكلة في سلوك Backbutton عند استخدام React-Navigation. يجب عليك استخدام useFocusEffect في هذه الحالة للوصول إلى السلوك المتوقع. مزيد من المعلومات: https://reactnavigation.org/docs/custom-droid-back-button handling/#why-not-use-component-lifecycle-methods
useCustomBackHandlerEffect	وظيفة	لا أحد	كما ذكرت أعلاه ، في بعض الأحيان يجب علينا إعادة كتابة سلوك عودة الظهر الأساسي. ستكون هذه الخاصية خطافًا مخصصًا. انظر المثال لمزيد من المعلومات: React Mavigation Custom Hook مثال
backHandlerBehaviour	خيط	ActiveMinusone	يمكن أن يتحكم هذا الدعامة في سلوك Backbutton. يجب أن تكون القيمة activeMinusOne أو previous
skipLabel	خيط	يتخطى	تسمية مخصصة لزر تخطي
nextLabel	خيط	التالي	تسمية مخصصة لزر التالي
doneLabel	خيط	منتهي	تسمية مخصصة لزر القيام به
renderSkipButton	وظيفة	تخطي الافتراضي/عروض الأزرار السابقة	استخدم لتوريد زر تخطي/السابق الخاص بك
renderNextButton	وظيفة	عارض الزر التالي الافتراضي	استخدم لتزويد الزر التالي الخاص بك
renderDoneButton	وظيفة	عارض الزر الافتراضي الذي تم القيام به	استخدم لتوفير زر تم القيام به
onDone	وظيفة	لا أحد	سلوك زر القيام به
onSkip	وظيفة	لا أحد	سلوك زر التخطي
showLeftButton	منطقية	حقيقي	عرض تخطي أو زر سابق على الجانب الأيسر
leftButtonType	خيط	يتخطى	يجب skip نوع الزر على الجانب الأيسر أو previous
columnButtonStyle	منطقية	خطأ شنيع	ستظهر الأزرار في عمود
showStatusBar	منطقية	خطأ شنيع	عرض شريط الحالة أعلى الشاشة. يمكنك جعل شريط الحالة الخاص بك خارج هذا المكون
statusBarColor	لون	#FEBE29	لون خلفية شريط الحالة
renderStatusBar	وظيفة	عارض شريط الحالة الافتراضي	استخدم لتوريد مكون شريط الحالة الخاص بك
limitToSlide	رقم	(عرض الجهاز القصوى) * 0.35	استخدام لتغيير حد الرسوم المتحركة الشريحة. يتم حسابه استنادًا إلى خاصية gestureState.dx الخاصة بـ Panresponder.

أمثلة

• مثال أساسي
• مثال أزرار العمود
• مثال الأزرار المخصصة
• مثال الزر السابق
• مثال شريط الحالة
• مثال على وظيفة عرض شريط التمرير المخصص
• React Feal Custom Hook مثال (لا يمكن تشغيله ، يتضمن الملف مزيدًا من المعلومات كيف يمكنك اختباره.)
• مثال آخر لتخصيص الحزمة مع مكتبات الجهات الخارجية.

استكشاف الأخطاء وإصلاحها

وظيفة OnPress TouchableOpacity: لقد قمت بإنشاء مشكلة جديدة على مستودع React-Native الرسمي ، لأن TouchableOpacity و Button و Pressable لا يعملون داخل PanResponder مع React Navigation NavigationContainer . الحل الخاص بي: استيراد TouchableWithoutFeedback من react-native-gesture-handler بدلاً من react-native واستخدم onPressIn بدلاً من وظيفة onPress ثم الكتابة فوق وظيفة RenderItem.

المساهمة

راجع دليل المساهمة لتعلم كيفية المساهمة في المستودع وسير العمل التنموي.

رخصة

معهد ماساتشوستس للتكنولوجيا