الفرق بين المراجعتين ل"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>] بدلًا عنه. |
| − | حاوية تسمح بتقليب العناصر الأبناء يمينًا ويسارًأ، | + | هذا المكوّن هو حاوية تسمح بتقليب العناصر الأبناء يمينًا ويسارًأ، حيث يُعرض كل إبن من أبناء المكون <code>ViewPagerAndroid</code> في صفحة منفصلة، كما يجب أن تكون جميع أبناء المكون <code>ViewPagerAndroid</code> من النوع <code>[[ReactNative/view|View]]</code> وليست مكونات مركبة. ويمكن إضافة أنماط مختلفة، مثل: <code>padding</code> أو <code>backgroundColor</code> لكلّ ابن على حدة، ومن المهم أن تُضاف الخاصية <code>key</code> لجميع الأبناء. |
| − | + | '''ملاحظة''': يجب أن يكون لكلّ إبن مفتاح تعريفي (identifier) | |
| − | |||
| − | '''ملاحظة''': يجب أن يكون | ||
'''مثال''' | '''مثال''' | ||
| − | <syntaxhighlight class="react">render() { | + | <syntaxhighlight class="react" lang="javascript">render() { |
return ( | return ( | ||
<ViewPagerAndroid | <ViewPagerAndroid | ||
| سطر 41: | سطر 39: | ||
== مرجع الخاصيات == | == مرجع الخاصيات == | ||
| − | يرث خواص المكون [ | + | يرث خواص المكون <code>[[ReactNative/view|View]]</code>. |
=== <code>initialPage</code> === | === <code>initialPage</code> === | ||
| − | + | تُحدّد ترتيب الصفحة الأولى التي يجب تحديدها، وتُستخدم الدالة <code>setPage</code> لتحديث الصفحة، كما تستخدم الدالة <code>onPageSelected</code> لمراقبة التغيرات التي تحدث في الصفحة. | |
{| class="wikitable" | {| class="wikitable" | ||
| سطر 51: | سطر 49: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| − | | | + | | عدد (number) |
| لا | | لا | ||
|} | |} | ||
| سطر 57: | سطر 55: | ||
=== <code>keyboardDismissMode</code> === | === <code>keyboardDismissMode</code> === | ||
| − | تُحدد ما إذا كانت لوحة المفاتيح ستُخفى عند | + | تُحدد ما إذا كانت لوحة المفاتيح ستُخفى عند السحب، وتأخذ القيمة <code>none</code> والتي تعنى عدم إخفاء لوحة المفاتيح عند السحب، أو <code>on-drag</code>والتي تُخفي لوحة المفاتيح عند السحب. |
{| class="wikitable" | {| class="wikitable" | ||
| سطر 63: | سطر 61: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| − | | | + | | <code>('none', 'on-drag')</code> |
| لا | | لا | ||
|} | |} | ||
| − | |||
| − | |||
| − | |||
=== <code>onPageScroll</code> === | === <code>onPageScroll</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> المُمَرر لهذه الدالة على: | |
<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> === | ||
| − | + | تُحدّد ما إذا سيتم تفعيل <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> ويحدد ترتيب الصفحة المراد الانتقال إليها. |
* تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة. | * تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة. | ||
| سطر 173: | سطر 150: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| − | | | + | | عدد (number) |
| نعم | | نعم | ||
|} | |} | ||
| − | |||
| − | |||
| − | |||
=== <code>setPageWithoutAnimation</code> === | === <code>setPageWithoutAnimation</code> === | ||
| − | دالة مساعدة تستخدم للإنتقال لصفحة | + | دالة مساعدة تستخدم للإنتقال لصفحة معيّنة داخل المكون <code>ViewPagerAndroid</code>. تستقبل معاملًا واحدًا هو <code>position</code> ويحدّد ترتيب الصفحة المراد الانتقال إليها. |
* لا تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة. | * لا تضيف تأثيرات حركية (animations) عند الانتقال للصفحة المحددة. | ||
| سطر 189: | سطر 163: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| − | | | + | | عدد (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