عرض مصدر ReactNative/virtualizedlist

<noinclude>{{DISPLAYTITLE:المكون VirtualizedList في ReactNative}}</noinclude>
إذا أردت أن تتحصل على مرونة أكبر من التي يوفرها المكونان <code>[[ReactNative/flatlist|<FlatList>]]</code> و<code>[[ReactNative/sectionlist|<SectionList>]]</code> لطريقة عرض القوائم، فعليك استخدام المكون <code>VirtualizedList،</code> والذي يوفّر عناصر البناء الرئيسية لعرض القوائم.  للاستخدام مع البيانات الغير قابلة للتعديل بدلًا عن المصفوفات العادية على سبيل المثال.

لهذا المكوّن فوائد عديدة حيث أنه يقلّل استهلاك الذاكرة ويحسِّن أداء القوائم كثيرًا من خلال الحفاظ على نافذة عرض محدودة للعناصر النشطة، ويستبدل العناصر الموجودة خارج هذه النافذة بمساحات فارغة بأحجام مناسبة. ويتم عرض العناصر تتابعيًا عند التمرير لأسفل في الشاشة، إذ تُعرض (تصير) العناصر البعيدة عن مجال الرؤية أو العرض بأسلوب أداء منخفض low-pri (قبل تشغيل أي تفاعلات) أو إن كانت قريب من مجال الرؤية، فتعرض بأسلوب أداء مرتفع hi-pri وكل ذلك لتقليل أي احتمال برؤية مسافة فارغة.

== مثال ==
إليك المثال التالية ([https://snack.expo.dev/@hsoubwiki/virtualizedlistexample تجربة حية]):<syntaxhighlight class="react" lang="javascript">import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [];

const getItem = (data, index) => ({
  id: Math.random().toString(12).substring(0),
  title: `Item ${index+1}`
});

const getItemCount = (data) => 50;

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <VirtualizedList
        data={DATA}
        initialNumToRender={4}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.key}
        getItemCount={getItemCount}
        getItem={getItem}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight,
  },
  item: {
    backgroundColor: '#f9c2ff',
    height: 150,
    justifyContent: 'center',
    marginVertical: 8,
    marginHorizontal: 16,
    padding: 20,
  },
  title: {
    fontSize: 32,
  },
});

export default App;</syntaxhighlight>

'''ملاحظات'''

* عند تمرير المحتوى خارج نافضة العرض، لا يحتفظ المكون <code>VirtualizedList</code> بالحالة الخاصة به، لذلك يجب التأكد من حفظها في مخزن خارجي للبيانات مثل <code>Flux</code> أو <code>Redux</code> أو <code>Relay</code>.
* يعتبر هذا المكون <code>PureComponent</code>، أي أنه لن يعاد رسمه إذا كانت الخاصيَّات متساوية تساويًا سطحيًا (shallow-equal). لذلك يجب التأكد من أن جميع الخاصيات التي تعتمد الدالة <code>renderItem</code> عليها قد تم تمريرها كمعاملات لا تساوي قيمتها قيمة الخاصيَّات الحالية للتأكد من تحديث واجهة المستخدم عند تغيير البيانات.
* يُعرض المحتوى بطريقة غير متزامنة خارج نافذة العرض، وذلك للحفاظ على مساحة الذاكرة وضمان التمرير السلس، هذا يعي أنه من الممكن ظهور مساحات فارغة للحظات بسيطه قبل ظهور المحتوى عند التمرير بسرعة عالية. ونعمل على تحسين هذا السلوك خلف الكواليس.
* يبحث المكون <code>VirtualizedList</code> افتراضيًا عن الخاصية <code>key</code> في كلّ عنصر من العناصر الأبناء.

__toc__

== الخاصيات ==

يرث خواص المكون <code>[[ReactNative/scrollview#الخاصيات|ScrollView]]</code>.
=== <code>data</code> ===

مصفوفة من الأصناف يمثِّل كلّ صنف أحد العناصر التي ستُعرض في القائمة، ويكون كلّ صِنف في الشكل <code>{key: string}</code> افتراضيًا، ويمكن استخدام الخاصيِّات <code>getItem</code> و<code>getItemCount</code> و<code>keyExtractor</code> للتعامل مع جميع انواع البيانات المُرتبة.

{| class="wikitable"
! النوع
! مطلوب
|-
| أي نوع <any>
| نعم
|}
=== <code>getItem</code> ===

<syntaxhighlight class="react" lang="javascript">(data: any, index: number) => object;</syntaxhighlight>
دالة تمكِّنك من الوصول لعنصر معين من العناصر المحفوظة في الخاصية <code>data</code> إن كانت بياناتها خام blob.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| نعم
|}
=== <code>getItemCount</code> ===

<syntaxhighlight class="react" lang="javascript">(data: any) => number;</syntaxhighlight>
تحسب عدد العناصر الموجودة في البيانات الخام <code>data</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| نعم
|}

=== <code>renderItem</code> ===
<syntaxhighlight class="react" lang="javascript">(info: any) => ?React.Element<any></syntaxhighlight>
تأخذ عنصر من <code>data</code> وتعرضه في القائمة.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| نعم
|}
===<code>CellRendererComponent</code>===

تُعرض جميع الخلايا بواسطة هذا العنصر. وقد يكون <code>React Component Class</code> أو <code>render function</code>.

والقيمة الإفتراضية له هي المكون <code>[[ReactNative/view|View]]</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| مكون component، دالة function
| لا
|}
===<code>ItemSeparatorComponent</code>===

يعرض هذا المكوّن فواصلًا بين العناصر، ويمتلك الخاصيتين <code>highlighted</code> و<code>leadingItem</code> إفتراضيًّا.

توفِّر الخاصية <code>renderItem</code> الخواص <code>separators.highlight</code> و<code>separators.unhighlight</code> واللتان تُستعملان لتحديث قيمة الخاصية <code>highlighted</code>. يمكن أيضًا إضافة خواص أخرى عن طريق الخاصية <code>separators.updateProps</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| مكون component، دالة function
| لا
|}
===<code>listEmptyComponent</code>===

يُعرض هذا المكون عندما تكون القائمة فارغة، ويمكن أن يكون مكون React (مثل <code>SomeComponent</code>) أو عنصر React (مثل <code><SomeComponent /‎></code>).

{| class="wikitable"
! النوع
! مطلوب
|-
| مكون component، عنصر element
| لا
|}
===<code>ListItemComponent</code>===

مكون يُستخدم لعرض عناصر القائمة، وقد يكون مكون صنف (Class component) أو دالة عرض (تصيير).
{| class="wikitable"
! النوع
! مطلوب
|-
| مكون component، دالة function
| لا
|}
===<code>ListFooterComponent</code>===

يُعرض في أسفل القائمة (تذييل للقائمة)، ويمكن أن يكون مكون React (مثل <code>SomeComponent</code>) أو عنصر React (مثل <code><SomeComponent /‎></code>).

{| class="wikitable"
! النوع
! مطلوب
|-
| مكون component، عنصر element
| لا
|}
===<code>ListFooterComponentStyle</code>===

تُحدد أنماط المكوّن <code>ListFooterComponent</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| خاصيات [[ReactNative/view style props|ViewStyle]]
| لا
|}
===<code>ListHeaderComponenet</code>===

يُُعرض في أعلى القائمة، وr$ ويمكن أن يكون مكون React (مثل <code>SomeComponent</code>) أو عنصر React (مثل <code><SomeComponent /‎></code>).
{| class="wikitable"
! النوع
! مطلوب
|-
| مكون component، عنصر element
| لا
|}
===<code>ListHeaderComponenetStyle</code>===

تُحدد أنماط المكون <code>ListHeaderCompoenet</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| خاصيات [[ReactNative/view style props|ViewStyle]]
| لا
|}

=== <code>debug</code> ===
يظهر المزيد من التفاصيل عن الأخطاء التي تحدث أثناء التعامل مع المكون <code>VirtulizedList</code> مما يسهل عملية تصحيح الأخطاء (debugging).

{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}

=== <code>disableVirtualization</code> ===
'''خاصية مهملة''': توفِّر المحاكاة الافتراضية تحسينات كبيرة في الأداء والذاكرة إلَّا أنها تلغي تمامًا حالات التفاعل الموجودة خارج نافذة العرض، حيث يجب تعطيل هذه الخاصية فقط أثناء بناء التطبيق وتصحيح الأخطاء.

{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}
=== <code>extraData</code> ===

تجبر هذه الخاصية الجهاز على إعادة رسم القائمة عند تغير أي بيانات داخل القائمة. إذا كان هناك عنصر من العناصر التي ستعرض بواسطة الدالة <code>renderItem</code> يعتمد على بيانات تم تعريفها خارج الخاصية <code>data</code>، ينبغي إعادة تعريف هذه البيانات داخلها.

{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}
=== <code>getItemLayout</code> ===

<syntaxhighlight class="react" lang="javascript">(
    data: any,
    index: number,
  ) => {length: number, offset: number, index: number}</syntaxhighlight>
{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}

=== <code>horizontal</code> ===
إن كانت true، فستعرض عناصر القائمة بجانب بعضها بعضًا أفقيًا بدلًا من عرضها فوق بعضها شاقوليًا.
{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}

=== <code>initialNumToRender</code> ===
تُحدد عدد العناصر التي ستُعرض في أول دفعة. يجب أن يكون عدد العناصر كافي لملء الشاشة أو أقل من ذلك ولكن يجب أن لا يزيد عن حجم الشاشة.

'''ملاحظة''': لتحسين عملية التمرير لأعلى (Scroll-to-top) يجب ألّا تُحذف هذه العناصر كجزء من إطارات العرض.

{| class="wikitable"
! النوع
! مطلوب
|-
| عدد (number)
| لا
|}
=== <code>initialScrollIndex</code> ===

بدلًا عن عرض أول عنصر في أعلى القائمة، تحدِّد هذه الخاصية ترتيب العنصر الذي يجب بدء عرضه في بداية القائمة، وذلك عن طريق ايقاف تحسين التمرير الى الأعلى الذي يحافظ على عرض عناصر <code>initialNumToRender</code> ويُعرض العناصر ابتداءً من أول عنصر في الترتيب، وتتطلّب هذه الخاصية أن تكون الخاصية <code>getItemLayout</code> مفعّلة.

{| class="wikitable"
! النوع
! مطلوب
|-
| عدد (number)
| لا
|}
=== <code>inverted</code> ===

تعكس إتجاه التمرير باستخدام تحويلات بمقياس (-1).

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}

=== <code>listKey</code> ===
مُعرِّف فريد للقائمة، وإذا كان هناك أكثر من قائمة في نفس المستوى (أبناء لعنصر واحد) متفرعة من قائمة أخرى، فيجب تحديد مفتاح مميز لكلّ قائمة لتُعرض القوائم وتعمل بشكل صحيح.

{| class="wikitable"
! النوع
! مطلوب
|-
| سلسلة نصية (string)
| لا
|}

=== <code>keyExtractor</code> ===
<syntaxhighlight class="react" lang="javascript">(item: object, index: number) => string;</syntaxhighlight>
تُستخدم للحصول على مفتاح عنصر ذو ترتيب معيّن في القائمة. يستخدم المفتاح للتخزين المؤقت (Caching) و على أساس مفتاح لتتبع ترتيب العناصر. يتحقق مُستخرج المفاتيح الافتراضي من <code>item.key</code>، ثم يرجع لاستخدام الترتيب، مثل ما يحدث في [[React]] تمامًا.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}

=== <code>maxToRenderPerBatch</code> ===
تُحدد أقصى عدد من العناصر يمكن عرضه في الدفعة الواحدة، وكلما زاد هذا العدد ستحصل على معدل ملء شاشة أفضل، ولكن قد يتأثر تجاوب التطبيق مع أحجام الشاشات المختلفة (responsiveness) بسبب تداخل المحتوى المعروض عند الضغط على الأزرار أو التفاعلات الأخرى.

{| class="wikitable"
! النوع
! مطلوب
|-
| عدد (number)
| لا
|}
===<code>onEndReached</code>===

دالة تستدعى عند الوصول للموقع المحدَّد بالخاصية <code>onEndReachedThreshold</code> في المحتوى المعروض.

<syntaxhighlight class="react" lang="javascript">(info: {distanceFromEnd: number}) => void;</syntaxhighlight>
{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}
===<code>onEndReachedThreshold</code>===

تُحدد إلى أيّ مدى يجب أن تكون الحافة السفلية للقائمة بعيدة من نهاية المحتوى (بوحدات الطول المرئي للقائمة) لتشغيل رد النداء <code>onEndReached</code>.  فالقيمة 0.5 على سبيل المثال ستُشغل ردّ النداء <code>onEndReached</code> عندما تكون نهاية المحتوى في حدود نصف الطول المرئي للقائمة.

{| class="wikitable"
! النوع
! مطلوب
|-
| عدد (number)
| لا
|}
===<code>onRefresh</code>===

<syntaxhighlight class="react" lang="javascript">() => void</syntaxhighlight>
توفِّر <code>RefreshControl</code> قياسي يُضاف لوظيفة السحب للتحديث (Pull to Refresh)، وعند استخدامها يجب التأكد من ضبط الخاصية <code>refreshing</code> بطريقة صحيحة.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (funcion)
| لا
|}
=== <code>onScrollToIndexFailed</code> ===

دالة تُستدعى في حالة حدوث خطأ عند التمرير لعنصر معين، فإمّا أن تحسب الإزاحة الخاصة بالعنصر الذي حدث الخطأ عند التمرير إليه وإعادة التمرير إليها مَرةً أخرى، أو التمرير لنهاية القائمة ثم الرجوع لذلك العنصر.

<syntaxhighlight class="react" lang="javascript">(info: {
    index: number,
    highestMeasuredFrameIndex: number,
    averageItemLength: number,
  }) => void</syntaxhighlight>
{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (funcion)
| لا
|}
=== <code>onViewableItemsChanged</code> ===
دالة تُستدعى عندما تتغير الصفوف المعروضة، كما هي مُعرَّفة بالخاصية <code>ViewabilityConfig</code>.<syntaxhighlight class="react" lang="javascript">(info: {
    viewableItems: array,
    changed: array,
  }) => void</syntaxhighlight>

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (funcion)
‎(callback: { changed: array of [[ReactNative/viewtoken|ViewTokens]], viewableItems: array of [[ReactNative/viewtoken|ViewTokens]] }) => void
| لا
|}

=== <code>persistentScrollbar</code> ===
{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}
===<code>progressViewOffset</code>===

اضبط قيمة هذه الخاصية إذا كنت تحتاج لمساحة لعرض مؤشر التحميل.

{| class="wikitable"
! النوع
! مطلوب
|-
| عدد
| لا
|}
=== <code>refreshing</code> ===

اعطي هذه الخاصية القيمة <code>true</code> أثناء إنتظار تحميل بيانات جديدة.

{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}
=== <code>refreshControl</code> ===

عنصر يستخدم للتحكم في طريقة تحديث عناصر القائمة، ويستبدل المكون <code><RefreshControl></code> الأصلي، وعند استخدامة يتم تجاهل الخاصيتين <code>onRefreshing</code> و<code>refreshing</code>. 

'''ملاحظة''': يعمل فقط مع المكوّن <code>VirtualizedList</code> عندما تكون القائمة رأسية.

{| class="wikitable"
! النوع
! مطلوب
|-
| عنصر element
| لا
|}
=== <code>removeClippedSubviews</code> ===

تُستخدم لتحسين عملية التمرير في القوائم الطويلة.

'''ملاحظة''': قد تحتوي على أخطاء (محتوى مفقود) في بعض الحالات - استخدمها على مسؤوليتك الخاصة-.

{| class="wikitable"
! النوع
! مطلوب
|-
| قيمة منطقية (bool)
| لا
|}
=== <code>renderScrollComponent</code> ===

<syntaxhighlight class="react" lang="javascript">(props: object) => element;</syntaxhighlight>
تعرض عنصر تمرير (scroll element) مخصَّص، على سبيل المثال <code>RefreshControl</code> ذو أنماط مختلفة.

{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
| لا
|}
=== <code>viewabilityConfig</code> ===

انظر [https://gist.github.com/sahrens/634233c57ef6c2cb694a <code>ViewabilityHelper.js</code>] لمزيد من المعلومات. 

{| class="wikitable"
! النوع
! مطلوب
|-
| <code>ViewabilityConfig</code>
| لا
|}
=== <code>viewabilityConfigCallbackPairs</code> ===

قائمة من أزواج، يتكون كل زوج من المكونين <code>ViewabilityConfig</code> و <code>onViewableItemsChanged</code>. تُستدعى الدالة <code>onViewableItemsChanged</code> من زوج معين عندما يتم استيفاء شروطها المحددة في الخاصية <code>ViewabilityConfig</code> في نفس الزوج.

{| class="wikitable"
! النوع
! مطلوب
|-
| مصوفة من الكائن ViewabilityConfigCallbackPair
| لا
|}
===<code>updateCellsBatchingPeriod</code>===

تُحدد المدة الزمنية بين عرض دفعات العناصر بعيدة الرؤية في الوضع low-pri لعرض هذه العناصر. تشبه إلى حد ما <code>maxToRenderPerBatch</code>.

{| class="wikitable"
! النوع
! مطلوب
|-
| عدد (number)
| لا
|}
=== <code>windowSize</code> ===

تُحدد الحدّ الأقصى من العناصر التي يمكن عرضها خارج المنطقة المرئية. على سبيل المثال إذا كانت القائمة تملأ الشاشة، فستعرض الخاصية <code>windowSize=21</code>  كامل القائمة (المنطقة المرئية) بالإضافة لمساحة 10 شاشات فارغة أعلى القائمة و10 أسفلها. 

'''ملاحظة''': القيم الصغيرة لهذه الخاصية تؤدّي لتقليل استهلاك الذاكرة وتحسين الأداء، ولكنها تزيد من احتمالية ظهور مساحات فارغة عند التمرير بسرعة كبيرة.

{| class="wikitable"
! النوع
! مطلوب
|-
| عدد (number)
| لا
|}
== التوابع ==

=== <code>()flashScrollINdicators</code> ===
<syntaxhighlight class="react" lang="javascript">flashScrollIndicators();</syntaxhighlight>

=== <code>‎getChildContext()‎</code> ===
<syntaxhighlight class="" lang="javascript">getChildContext() => Object;</syntaxhighlight>
يتكون الكائن <code>VirtualizedList</code> المُرجع من هذه الدالة من:

* <code>getScrollMetrics</code> (دالة). تُرجع كائن يحتوي على الخواص التالية:
<syntaxhighlight class="" lang="javascript">{
	contentLength: number,
	dOffest: number,
	dt: number,
	offset: number,
	timestamp: number,
	velocity: number,
	visibleLength: number
}</syntaxhighlight><ul>
<li><p><code>horizontal</code> (قيمة منطقية) - اختياري-.</p></li>
<li><p><code>getOutermostParentListRef</code> (دالة).</p></li>
<li><p><code>getNestedChildState</code> (دالة) - تُرجع <code>ChildListState</code>.</p></li>
<li><p><code>registerAsNestedChild</code> (دالة) وتُرجع <code>ChildListState</code>. تستقبل كائنًا يحتوي على الخواص التالية:</p></li></ul>

<syntaxhighlight class="" lang="javascript">{
	cellKey: string,
	key: string,
	ref: VirtualizedList,
	parentDebugInfo: ListDebugInfo
}</syntaxhighlight>
*<code>unregisterAsNestedChild</code> (دالة). تستقبل كائن يحتوي على الخواص التالية:

<syntaxhighlight class="" lang="javascript">{
	key: string,
	state: ChildListState
}</syntaxhighlight>
* ‪<code>debugInfo</code> (ListDebugInfo)
===<code>()getScrollableNote</code>===

<syntaxhighlight class="react" lang="javascript">getScrollableNode () => ?number;</syntaxhighlight>
===<code>‎getScrollRef()‎</code>===

<syntaxhighlight class="react" lang="javascript">getScrollRef () => | ?React.ElementRef<typeof ScrollView>
    | ?React.ElementRef<typeof View>;</syntaxhighlight>

=== <code>()getScrollResponder</code> ===
<syntaxhighlight class="react" lang="javascript">getScrollResponder() => ?scollResponderType;</syntaxhighlight>يوفر معالجًا لمستجب التمرير الداخلي (الرئيسي). انتبه إلى أن <code>this._scrollRef</code> قد لا تكون <code>ScrollView</code>، لذا يجب التحقق من أنه يستجيب إلى <code>getScrollResponder</code> قبل استدعائه.

===<code>‎hasMore()‎</code>===

<syntaxhighlight class="react" lang="javascript">hasMore() => boolean</syntaxhighlight>
===<code>scrollToEnd</code>===

<syntaxhighlight class="react" lang="javascript">scrollToEnd((params: object));

Valid `params` consist of:

- 'animated' (boolean). Optional default is true.</syntaxhighlight>

=== <code>scrollToIndex</code> ===
<syntaxhighlight class="react" lang="javascript">scrollToIndex((params: object));</syntaxhighlight>
'''المعاملات'''

{| class="wikitable"
! المعامل
! النوع
! مطلوب
|-
| <code>animated</code>
| قيمة منطقية (bool)
| لا
|-
| <code>index</code>
| عدد (number)
| نعم
|-
| <code>viewOffset</code>
| عدد (number)
| لا
|-
| <code>viewPosition</code>
| عدد (number)
| لا
|}
=== <code>scrollToItem</code> ===

<syntaxhighlight class="react" lang="javascript">scrollToItem((params: object));</syntaxhighlight>
'''المعاملات'''

{| class="wikitable"
! المعامل
! النوع
! مطلوب
|-
| <code>animated</code>
| قيمة منطقية (bool)
| لا
|-
| <code>item</code>
| item
| نعم
|-
| <code>viewPosition</code>
| عدد (number)
| لا
|}
=== <code>scrollToOffset</code> ===

<syntaxhighlight class="react" lang="javascript">scrollToOffset((params: object));</syntaxhighlight>
تُمرر إلى موضع معين في القائمة.

* يُحدد المعامل <code>offset</code> الإزاحة التي يجب التمرير لها. إذا كانت القائمة أفقية <code>horizontal</code> تكون قيمة هذه المعامل على محور (x)، وعلى محور (y) إذا كانت القائمة رأسية.
* يُحدد المعامل <code>animated</code> ما إذا كانت ستُضاف تأثيرات حركية أثناء عملية التمرير أم لا. قيمته الافتراضية <code>true</code>.
=== <code>‎recordInteraction()‎</code> ===

<syntaxhighlight class="react" lang="javascript">recordInteraction();</syntaxhighlight>

=== <code>‎setNativeProps()‎</code> ===
<syntaxhighlight class="" lang="javascript">setNativeProps((props: Object));</syntaxhighlight>
== المصادر ==

* [https://reactnative.dev/docs/virtualizedlist صفحة VirtualizedList في توثيق React Native الرسمي.]
[[تصنيف: ReactNative]]
[[تصنيف:React Native Component]]