المكون ViewPagerAndroid في ReactNative

مكون مهمل. يمكنك استخدام المكون ‎@react-native-community/viewpager بدلًا عنه.

هذا المكوّن هو حاوية تسمح بتقليب العناصر الأبناء يمينًا ويسارًأ، حيث يُعرض كل إبن من أبناء المكون ViewPagerAndroid في صفحة منفصلة، كما يجب أن تكون جميع أبناء المكون ViewPagerAndroid من النوع View وليست مكونات مركبة. ويمكن إضافة أنماط مختلفة، مثل: padding أو backgroundColor لكلّ ابن على حدة، ومن المهم أن تُضاف الخاصية key لجميع الأبناء.

ملاحظة: يجب أن يكون لكلّ إبن مفتاح تعريفي (identifier)

مثال

render() {
  return (
    <ViewPagerAndroid
      style={styles.viewPager}
      initialPage={0}>
      <View style={styles.pageStyle} key="1">
        <Text>First page</Text>
      </View>
      <View style={styles.pageStyle} key="2">
        <Text>Second page</Text>
      </View>
    </ViewPagerAndroid>
  );
}

...

const styles = {
  ...
  viewPager: {
    flex: 1
  },
  pageStyle: {
    alignItems: 'center',
    padding: 20,
  }
}

مرجع الخاصيات

يرث خواص المكون View.

initialPage

تُحدّد ترتيب الصفحة الأولى التي يجب تحديدها، وتُستخدم الدالة setPage لتحديث الصفحة، كما تستخدم الدالة onPageSelected لمراقبة التغيرات التي تحدث في الصفحة.

النوع	مطلوب
عدد (number)	لا

keyboardDismissMode

تُحدد ما إذا كانت لوحة المفاتيح ستُخفى عند السحب، وتأخذ القيمة none والتي تعنى عدم إخفاء لوحة المفاتيح عند السحب، أو on-dragوالتي تُخفي لوحة المفاتيح عند السحب.

النوع	مطلوب
('none', 'on-drag')	لا

onPageScroll

دالة تُستدعى عند التنقل بين الصفحات، ويحمل الحدث event.nativeElement البيانات التالية:

• position: ترتيب الصفحة الأولى من اليسار نسبةً للصفحة الحالية.
• offset: قيمة رقمية بين صفر وواحد، القيمة (x) تعني أن نسبة (1-x) من الصفحة في الترتيب position ، ونسبة (x) من الصفحة التالية مرئية.

النوع	مطلوب
دالة (function)	لا

onPageScrollStateChanged

دالة تُستدعى عند تغَيُّر حالة مؤشر التحريك. وله ثلاث حالات:

• idle: وتعني أنّ مؤشر التحريك ثابت في مكانه (لم يحدث تمرير في الصفحة).
• dragging: تعني أنّ مؤشر التحريك يتحرك في هذه اللحظة.
• settling/ تعني أنّ مؤشر التحريك عاد للثبوت بعد اكتمال عملية التمرير.

النوع	مطلوب
دالة (function)	لا

onPageSelected

ردّ نِداء يُستدعى عندما يُكمل المكون ViewPager عملية الانتقال للصفحة المُحددة (عندما يُمرر المستخدم بين الصفحات). ويحتوي الصنف event.nativeEvent المُمَرر لهذه الدالة على:

• position: ترتيب الصفحة الحالية.

  النوع	مطلوب
  دالة (function)	لا

pageMargin

تُحدِّد المساحات الفارغة (الهوامش) بين الصفحات، وتكون متاحةً فقط أثناء الانتقال بين الصفحات عندما تكون هناك أكثر من صفحة مرئية.

النوع	مطلوب
دالة (function)	لا

peelEnabled

تُحدّد ما إذا سيتم تفعيل peekFraction أم لا، إذا كانت قيمتها true ستُعرض المعاينة (preview) الخاصة بالصفحة السابقة والتالية على الصفحة الحالية.

النوع	مطلوب
قيمة منطقية (bool)	لا

scrollEnabled

تمنع التمرير بين الصفحات إذا كانت قيمتها false.

النوع	مطلوب
قيمة منطقية (bool)	لا

setPage

دالة مساعدة تستخدم للإنتقال لصفحة معيّنة داخل المكون ViewPagerAndroid. تستقبل معاملًا واحدًا هو position ويحدد ترتيب الصفحة المراد الانتقال إليها.

• تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة.

النوع	مطلوب
عدد (number)	نعم

setPageWithoutAnimation

دالة مساعدة تستخدم للإنتقال لصفحة معيّنة داخل المكون ViewPagerAndroid. تستقبل معاملًا واحدًا هو position ويحدّد ترتيب الصفحة المراد الانتقال إليها.

• لا تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة.

النوع	مطلوب
عدد (number)	نعم

تعريفات الأنواع

ViewPagerScrollState

النوع: $Enum

الثوابت

idle، dragging، settling

المصادر

صفحة ViewPager في توثيق React Native الرسمي.