الفرق بين المراجعتين لصفحة: «ReactNative/viewpagerandroid»

من موسوعة حسوب
مرئينص الويكي
رفع المحتوى
 
ط مراجعة
 
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:المكون ViewPagerAndroid في ReactNative}}</noinclude>
<noinclude>{{DISPLAYTITLE:المكون ViewPagerAndroid في ReactNative}}</noinclude>
'''مكون مهمل'''. استخدم المكون [https://github.com/react-native-community/react-native-viewpager <code>‎@react-native-community/viewpager</code>] بدلًا عنه.
'''مكون مهمل'''. يمكنك استخدام المكون [https://github.com/react-native-community/react-native-viewpager <code>‎@react-native-community/viewpager</code>] بدلًا عنه.


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


يجب أن تكون جميع أبناء المكون <code>ViewPagerAndroid</code> من النوع <code>View</code> وليست مكونات مركبة. ويمكن إضافة أنماط مختلفة مثل <code>padding</code> أو <code>backgroundColor</code> لكل ابن على حده. ومن المهم أن تُضاف الخاصية <code>key</code> لجميع الأبناء.
'''ملاحظة''': يجب أن يكون لكلّ إبن مفتاح تعريفي (identifier)
 
'''ملاحظة''': يجب أن يكون لكل إبن مفتاح تعريفي (identifier)


'''مثال'''
'''مثال'''


<syntaxhighlight class="react">render() {
<syntaxhighlight class="react" lang="javascript">render() {
   return (
   return (
     <ViewPagerAndroid
     <ViewPagerAndroid
سطر 41: سطر 39:
== مرجع الخاصيات ==
== مرجع الخاصيات ==


يرث خواص المكون [https://reactnative.dev/docs/view#props <code>View</code>].
يرث خواص المكون <code>[[ReactNative/view|View]]</code>.


=== <code>initialPage</code> ===
=== <code>initialPage</code> ===


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


{| class="wikitable"
{| class="wikitable"
سطر 51: سطر 49:
! مطلوب
! مطلوب
|-
|-
| رقم (number)
| عدد (number)
| لا
| لا
|}
|}
سطر 57: سطر 55:
=== <code>keyboardDismissMode</code> ===
=== <code>keyboardDismissMode</code> ===


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


{| class="wikitable"
{| class="wikitable"
سطر 63: سطر 61:
! مطلوب
! مطلوب
|-
|-
| enum('none', 'on-drag')
| <code>('none', 'on-drag')</code>
| لا
| لا
|}
|}
=== <code>onPageScroll</code> ===
=== <code>onPageScroll</code> ===


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


* position: ترتيب الصفحة الأولى من اليسار نسبةً للصفحة الحالية.
* position: ترتيب الصفحة الأولى من اليسار نسبةً للصفحة الحالية.
سطر 83: سطر 78:
| لا
| لا
|}
|}
=== <code>onPageScrollStateChanged</code> ===
=== <code>onPageScrollStateChanged</code> ===


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


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


{| class="wikitable"
{| class="wikitable"
سطر 101: سطر 93:
| لا
| لا
|}
|}
=== <code>onPageSelected</code> ===
=== <code>onPageSelected</code> ===


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


<ul>
<ul>
سطر 118: سطر 107:
|}
|}
</li></ul>
</li></ul>


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


{| class="wikitable"
{| class="wikitable"
سطر 132: سطر 118:
| لا
| لا
|}
|}
=== <code>peelEnabled</code> ===
=== <code>peelEnabled</code> ===


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


{| class="wikitable"
{| class="wikitable"
سطر 146: سطر 129:
| لا
| لا
|}
|}
=== <code>scrollEnabled</code> ===
=== <code>scrollEnabled</code> ===


سطر 160: سطر 140:
| لا
| لا
|}
|}
=== <code>setPage</code> ===
=== <code>setPage</code> ===


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


* تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة.
* تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة.
سطر 173: سطر 150:
! مطلوب
! مطلوب
|-
|-
| رقم (number)
| عدد (number)
| نعم
| نعم
|}
|}
=== <code>setPageWithoutAnimation</code> ===
=== <code>setPageWithoutAnimation</code> ===


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


* لا تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة.
* لا تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة.
سطر 189: سطر 163:
! مطلوب
! مطلوب
|-
|-
| رقم (number)
| عدد (number)
| نعم
| نعم
|}
|}
== تعريفات الأنواع ==
== تعريفات الأنواع ==


سطر 200: سطر 171:


النوع: $Enum
النوع: $Enum


'''الثوابت'''
'''الثوابت'''

المراجعة الحالية بتاريخ 04:51، 5 مارس 2021

مكون مهمل. يمكنك استخدام المكون ‎@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 الرسمي.

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/viewpagerandroid&oldid=30357»