المكون 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والتي تخفي لوحة المفاتيح عند السحب.

النوع	مطلوب
enum('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 الرسمي.