برمجة و انشاء قوائم التمرير (ListView) في React Native

 

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

أهلا و سهلا بكم اخواني الأعزاء، في هذه المقالة سنتطرق الى انشاء عارضة القوائم (ListView) في تطبيقات React Native، اذا كنت جديداً معنا أنصحك بالعودة الى دروس سابقة لنمشي بخطوات مبسطة لنكمل المسيرة مع بعض و تكون فاهماً لهذه المقالة بحول الله. 

المقالات السابقة:

لو تفحصت في توثيقات React Native على موقعهم الرسمي تجد مكوناً أساسيا (core component) يسمى بـ ListView ، هذا الأخير يمكّنك من انشاء قائمة تمرير عمودية تظهر بها معلوماتك التي تجلبها من قاعدة البيانات أو معلوماتك معينة في مصفوفة (Arrays). 

معلومة: هذا المكونّ ليس وحده ضمن اطار React Native بل توجد مكونات أخرى تؤدي تقريباً نفس العمل كـ  FlatList أو SectionList كلاهما يحمل أسلوباً مختلفا في كتابته

لانشاء هذا العنصر يتوجب علينا برمجة (data source) أو مصدر بيانات و ملئِه بمصفوفة من الخصائص؛ لتكون مصدرا لبياناتها التي سنعرضها بعد قليل و نمررها بدالة أخرى تعرف بـ renderRow الى JSX. 

class List extends Component { 
  constructor (props) { 

    super (props); 

    const ds = new ListView.DataSource({ 
      rowHasChanged: (r1, r2) => r1 !== r2 }); 

    this.state = { 
      dataSource: ds.cloneWithRows(['row 1', 'row 2']) 
    }; 
  } 

  render () { 
    return ( 
      <ListView 
        dataSource = { this.state.dataSource } 
        renderRow = { (rowData) => <Text>  
          { rowData } </Text> } 
      /> 
    ); 
  } 
} 

لنرى بقرب ماذا كتبنا: أنشأنا دالة بناء (constructor) و عرّفنا معها super كما أخبرتكم سابقاً أنها إلزامية جداً في صيغ (ES6). و ضمن دالة البناء أنشأنا نموذجاً : عارض مصدر بيانات القائمة (ListViewDataSource) و هذا العارض يحمل محددات (parameter) و أسس (argument) هي أربع: 

getRowData(dataBlob, sectionID, rowID)

getSectionHeaderData(dataBlob, sectionID)

rowHasChanged(previousRowData, nextRowData)

sectionHeaderHasChanged(previousSectionData, nextSectionData)

1 - المحدد الأول (getRowData) : 

• وظيفة تقوم بجلب البيانات المطلوبة (data required) لتعيدها الى الصف (Row). بامكانك تخصيصها لتعيد و تمرر ما تشاء الى العارض (ListViewDataSource) و لا يهم ان كتبتها في شفرتك أو لا .. لأنها تكون معرفة افتراضياً اذا كنت لا تحتاجها.

2 - المحدد الثاني (getSectionHeaderData) :

• وظيفة تقبل كذلك نقطة بيانات (blob of data) و قسمها الخاص (section ID) لتعيد فقط البيانات المطلوبة الى (section header). و لا يهم ان كتبتها في شفرتك أو لا .. لأنها تكون معرفة افتراضياً اذا كنت لا تحتاجها.

3 - المحدد الثالث (rowHasChanged) : 

• هي وظيفة بمثابة تحسين الأداء، مصممة فقط لتعيد التقديم (re-render) الى الصفوف التي تم تغيير بيانات مصدرها. مختلفة عن المحددات السابقة (getRowData) و (getSectionHeaderData). مهمة للغاية و يجب عليك كتابتها ضمن العارض.

4 - المحدد الرابع (sectionHeaderHasChanged) :

• وظيفة اختيارية، تقارن (section headers) التي تحتاج الى اعادة تقديم (re-render). 

اذاً، أنشأنا حالة (State) أسميناها (dataSource) و استدعينا cloneWithRows الذي يحمل متغيرين - (dataBlob) : المعلومات التي تود تمريرها للعارض و (rowIdentities): هي اختيارية. لا تنسى (dataSource) الحاملة للمعلومات غير قابلة للتغيير.

نعود مرة أخرى للمكوّن نفسه (ListView) و نمرر له البيانات التي أنشأناها مسبقاً: عبر (renderRow) التي تأخذ المعلومات من (dataSource) الأولية و تمررها الى (dataSource) الثانية في JSX.

 

 

ما رأيك الآن، جميلة صح! طريقة سهلة و بسيطة لعرض قوائمك بسهولة. ان شاء الله تكون استمتعت بالدرس، أي استفسار أو جملة مبهمة لا يردكم الكيبورد نحن متواجون باذن الله للرد على استفساراتكم. دعواتكم لنا. 

كلمات دليلية: تعلم رياكت نيتف