كيف أعرض عدد محدد فقط داخل ال FlatList وليس عدد ال objects كلها ؟؟ React Native

يمكن تحديد عدد العناصر التي سيتم جلبها عن طريق jsonplaceholder بتمرير وسيط limit مع الرابط بالطريقة التالية باستخدام GET URL parameters:

https://jsonplaceholder.typicode.com/photos/?_limit=10

كما يدعم هذا ال API تقسيم البيانات لصفحات وتحميل كل منهم على حدى مثلا يمكنك تقسم ال 50 عنصر ل 5 مجموعات بتحديد رقم الصفحة page مع limit معين :

https://jsonplaceholder.typicode.com/photos?_page=1&_limit=10
_________________________________________________^^^
https://jsonplaceholder.typicode.com/photos?_page=2&_limit=10
_________________________________________________^^^

سيتم جلب أول 10 لأول صفحة 1 .. 10  ثم ثاني مجموعة لثاني صفحة 11 .. 20 وهكذا

مرحباً أحمد

ما تريده هو ما نسميه pagination ونستخدم هذه الطريقة في الحالات المماثلة لحالتك ولكن يجب توافر شرط مهم وهو أ ال API يجب أن تدعم ال pagination (لكي تقول لها أنا في الصفحة الأولى وأريد ١٠ نتائج فقط أو أنا في الصفحة العشرين وأريد ٥ نتائج) 

• في حالتك تحققت من وجود pagination يمكنك الإطلاع على طيقة الكتابة في قسم paginate من هنا
• الآن كل ما عليك فعله هو تعديل الرابط فقط ليكون هكذا 

  // حيث 
  // _page: هي الصفحة الحالية عند تحميل التطبيق
  // _limit: هو عدد البيانات التي تريد الحصول عليه عند مخاطبة السيرفر
  
  https://jsonplaceholder.typicode.com/photos?_page=0&_limit=50

• أما إذا أردت أن تجعل الأمر ديناميكياً بحيث عند تضغط على زر معين يقوم بتحميل المزيد من البيانات فهذا يسمى (.SSP: Server Side Pagination ) وهي لعبة state لا أكثر ولا أقل فقط ستجعل _page, _limit ديناميكي وهذا كمثال

  class SSP extends React.Component {
  
    state= {
      pageIndex: 0, // الصفحة
      pageSize: 50, // عدد البيانات المستلمة 
      data: [] // التي ستعطيها لل FlatList 
    }
  
    componentDidMount() {
      this.loadData();
    }
  
    loadData = () => {
      const {pageIndex, pageSize} = this.state;
      axios(`https://jsonplaceholder.typicode.com/photos?_page=${pageIndex}&_limit=${pageSize}`)
        .then(res => {
          // عند الحصول علي الداتا نقوم بإعطائها لل state
          // وندمجها بالبيانات القديمة (مهم جدا حتى لا نفقد البيانات التي تم تحميلها مسبقاً)
          this.setState(prevState => ({ data: prevState.data.concat(res.data) }));
        })
    }
  
    onPressLoadMore =() => {
      // نحن الآن نريد الصفحة التالية ونريد ٥٠ نتيجة أخرى
      // لذلك نقوم بتحديث ال state
  
      this.setState({ pageIndex: this.state.pageIndex +1 }, () => {
            // بعدها نقوم بتحميل البيانات
        this.loadData();
      })
    }
  
    render() {
      return(
        // زر عند الضغط عليه يقوم بتحميل المزيد من البيانات 
        <Button
          onPress={onPressLoadMore}
        />
  
        // هنا ال flatList
      );
    }
  }