react-native
सूची दृश्य

सरल उदाहरण

सूची दृश्य - बदलते डेटा की लंबवत स्क्रॉल सूची के कुशल प्रदर्शन के लिए डिज़ाइन किया गया एक मुख्य घटक। न्यूनतम API एक ListView.DataSource बनाने के लिए है, इसे डेटा ब्लॉब्स के एक सरल सरणी के साथ पॉप्युलेट करें, और उस डेटा स्रोत और एक रेंडरऑवर कॉलबैक के साथ एक ListView घटक को तुरंत लिखें जो डेटा सरणी से बूँद लेता है और एक रेंडर योग्य घटक देता है।

न्यूनतम उदाहरण:

getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},

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

ListView भी अधिक उन्नत सुविधाओं का समर्थन करता है, जिसमें चिपचिपा अनुभाग हेडर, हेडर और पाद समर्थन, उपलब्ध डेटा के अंत तक पहुँचने पर कॉलबैक (onEndReached) और डिवाइस व्यूपोर्ट परिवर्तन (onChangeVoubleRows) में दिखाई देने वाली पंक्तियों के सेट सहित, और कई प्रदर्शन अनुकूलन।

डायनामिक रूप से संभावित रूप से बहुत बड़े (या वैचारिक रूप से अनंत) डेटा सेट को लोड करते समय लिस्ट स्क्रॉल को सुचारू रूप से करने के लिए डिज़ाइन किए गए कुछ प्रदर्शन ऑपरेशन हैं:

• केवल परिवर्तित पंक्तियों को फिर से प्रस्तुत करना - डेटा स्रोत को प्रदान किया गया rowHasChanged फ़ंक्शन ListView को बताता है कि क्या उसे किसी पंक्ति को फिर से प्रस्तुत करने की आवश्यकता है क्योंकि स्रोत डेटा बदल गया है - अधिक विवरण के लिए ListViewDataSource देखें।
• दर-सीमित पंक्ति प्रतिपादन - डिफ़ॉल्ट रूप से, केवल एक पंक्ति प्रति घटना-लूप (पृष्ठ के आकार के साथ अनुकूलन) प्रदान की जाती है। पंक्तियों को प्रस्तुत करते समय फ़्रेम को छोड़ने की संभावना को कम करने के लिए यह काम को छोटे टुकड़ों में तोड़ता है।