+1
ठीक उसी समस्या का सामना करना पड़ रहा है। 0.5 के साथ काम किया लेकिन 0.6 के साथ टूट गया।

इसे 0.7 . में तय किया जाना चाहिए

मैं वही सटीक समस्या का अनुभव कर रहा था।

क्लोनविथरो ठीक काम करता है। लेकिन cloneWithRowsandSections नहीं करता है।

क्या आप देख रहे हैं कि क्लोनविथरोज़ैंडसेक्शन 0.7 के साथ काम नहीं कर रहा है?

साथ ही, हो सकता है कि आप प्रारंभिक लिस्टसाइज को बड़ी संख्या में सेट करने का प्रयास करना चाहें - जो आपके लिए 0.7 में चीजें तय नहीं होने पर वर्कअराउंड के रूप में मदद कर सकता है।

बड़ा प्रारंभिक सूची आकार मदद नहीं करता है और 0.7 मैंने अभी तक कोशिश नहीं की है क्योंकि विक्रेता निर्भरता। जैसा कि यह संभव होगा मैं आपको 0.7 के बारे में बताऊंगा अगर कोई जल्दी नहीं होगा :)

संस्करण 0.6 में क्लोनविथरो के साथ एक ही समस्या होने के कारण, 0.5 में काम कर रहा था।

0.7 में कोशिश नहीं की है। इसकी एक बार कोशिश करूंगा। मुझे पता है कि मैंने प्रारंभिक लिस्टसाइज को पहले एक उच्च संख्या में सेट करने का भी प्रयास किया था और मदद नहीं की थी।

0.7 . में काम किया

0.7.1 . में भी काम नहीं कर रहा है

संस्करण 0.7.1 . में क्लोनविथरो के साथ एक ही समस्या होने के कारण

मेरे लिए यह 0.7.1 में अच्छा काम करता है।

0.8.0 में काम नहीं करता है।

अभी भी cloneWithRows बजाय cloneWithRowsAndSections

cloneWithRows आपके लिए काम करता है यामिल? मेरे लिए 0.8.0 में नहीं है।

@coderdave वास्तव में cloneWithRows मेरे लिए भी काम नहीं करता है। मेरी गलती।

@sahrens @ide @michalraska मेरा scrollY प्रोप अपडेट नहीं हो रहा था। मैं मूल रूप से स्क्रॉल ऑफ़सेट को अपने घटक में पास करने का प्रयास कर रहा था, जैसे:

    renderRow: function (rowData, sectionID, rowID) {
          return (
            <Row
            key={rowData.id} data={rowData} scrollY={this.state.contentOffset}
             />
          )
    });

लेकिन इस लाइन को ठीक करने से मुझे अपने घटक को सफलतापूर्वक scrollY प्रोप प्राप्त करने की अनुमति मिली। मुझे आश्चर्य है कि क्या यह परिवर्तन अन्य सभी मुद्दों को ठीक करता है?

https://github.com/facebook/react-native/blob/757d6d204ae2d743634af64e3f78a4aad9d53f70/Libraries/CustomComponents/ListView/ListView.js#L342 -L343

मैंने इसे इससे बदल दिया:

var shouldUpdateRow = rowCount >= this.state.prevRenderedRowsCount && dataSource.rowShouldUpdate(sectionIdx, rowIdx);

प्रति

var shouldUpdateRow = true;

मैंने इसे 0.11.0-आरसी पर भी देखा है।

यहां दो उदाहरण दिए गए हैं जो इस मुद्दे को पुन: पेश कर सकते हैं।

पंक्तियाँ: https://rnplay.org/apps/d3DM6A
पंक्तियाँ + अनुभाग: https://rnplay.org/apps/xnyaYw

मैं जिस अस्थायी समाधान के साथ आया था, वह सूची दृश्य 1pt को स्क्रॉल करना था जब यह माउंट होता है।

let listViewScrollView = this.refs.listView.getScrollResponder();
listViewScrollView.scrollTo(1);

आप परीक्षण के लिए rnplay.org पर उदाहरण के अंदर इस अनुभाग को असम्बद्ध कर सकते हैं।

मुर्खता भरा प्रश्न। क्या इसका नेविगेटर आईओएस के उपयोग से कोई लेना-देना हो सकता है? जब नेविगेटरआईओएस के बच्चे के रूप में एक सूची दृश्य प्रस्तुत किया गया था, तो मेरे पास कुछ समस्याएं थीं/प्रतिपादन, पैडिंग इत्यादि।

@jaygarcia मुझे ऐसा नहीं लगता क्योंकि उदाहरण नेविगेटरआईओएस का उपयोग नहीं करता है। साथ ही, अपने स्वयं के प्रोजेक्ट में मैं नेविगेटर आईओएस के बजाय नेविगेटर का उपयोग कर रहा हूं।

मेरे लिए +1, नेविगेटर का उपयोग करते समय मुझे वर्तमान में इस व्यवहार का सामना करना पड़ रहा है। मैं 0.11 पर हूं और मैं क्लोनविथरो का उपयोग करता हूं।

वर्कअराउंड के रूप में, मुझे @christopherdro के समाधान का उपयोग करना पड़ा, लेकिन मुझे अपने आइटम प्रस्तुत करने के लिए इसे पर्याप्त रूप से स्क्रॉल करने की आवश्यकता होगी (वे बड़े हैं)।

दिलचस्प बात यह है कि आसपास का काम इस बग के समाधान से संबंधित है: https://github.com/facebook/react-native/issues/1878 तो मेरा अंतिम कोड है:

    listViewScrollView.scrollWithoutAnimationTo(80);
    listViewScrollView.scrollWithoutAnimationTo(-80);

ठीक है, ऊपर वर्णित कोड का उपयोग करते हुए, मुझे नेस्टेड स्क्रॉलव्यू में कुछ विचित्र बग मिले: माउंटिंग के बाद, एक ऑनस्क्रॉल ईवेंट ट्रिगर किया गया जिसने उन दृश्यों पर मेरी प्रारंभिक स्क्रॉल ऑफ़सेट को पुनर्स्थापित किया।

अभी भी 0.12.0 में एक बग। यहाँ दृश्य पदानुक्रम है:

0.11.0 पर @Sidnicious के समान मुद्दे। प्रतिक्रिया-मूल के प्रारंभिक संस्करण के बाद से मेरे ऐप में यह समस्या है। सब कुछ काम करता है के रूप में अगर मैं ले जाने की उम्मीद ListView से बाहर Navigator पदानुक्रम।

मैं 0.13.0-rc का उपयोग करके एक ही समस्या का सामना कर रहा हूं

मेरे पास यह समस्या केवल 0.13.1 :

    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {dataSource: ds.cloneWithRows(Array.apply(null, {length: 100}).map(Number.call, Number))};
    }
    render() {
        return (
    <ListView
        style={{paddingTop: 20, flex: 1}}
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
    />
    )

मेरे लिए यह समस्या केवल 0.14.2 से 0.16.0-rc अपग्रेड करते समय दिखाई दी। मेरे लिए काम करने वाला फिक्स pageSize प्रोप को ListView पर 3 पर सेट करना था। 2 ने मेरे लिए काम नहीं किया, लेकिन 3 ने बहुत अच्छा काम किया।

_(ツ)_/¯

0.15.0 के साथ यहाँ एक ही मुद्दा, सभी तरकीबें आजमाईं, कोई किस्मत नहीं। आईओएस 9.1 आईफोन 6

@nicklockwood - क्या आप यहां मदद कर सकते हैं? ऐसा लगता है कि अभी भी कुछ बग हैं।

0.14, वही मुद्दा

एक समान LisView समस्या को लिंक करना: https://github.com/facebook/react-native/issues/4728

इसी तरह के एक और मुद्दे को जोड़ना: https://github.com/facebook/react-native/issues/4179

मैं इसे 0.16.0 में देख रहा हूं। क्या किसी ने इसे उत्पाद दर्द पर रडार पर रखा है? ये काफी दर्दनाक होता जा रहा है. :/

मैंने इसे Product Pains पर पोस्ट किया है। यदि यह अभी भी प्रभावित कर रहा है तो आप इसे वहां वोट करने के लिए स्वतंत्र महसूस करें।

0.16, वही मुद्दा

डेटा स्रोत पर क्लोनविथरो का उपयोग करके समस्या अभी भी 0.17 में बनी हुई है। सूची केवल तभी आइटम प्रस्तुत करती है जब इसे स्क्रॉल किया जा रहा हो।

मैं इसी मुद्दे को 0.17 पर देख रहा था लेकिन removeClippedSubviews को अक्षम करने से लगता है कि इसे ठीक कर दिया गया है।

+1
मैं 0.17 पर इसी मुद्दे को देख रहा था, लेकिन हटाने को अक्षम करने से लगता है कि इसे ठीक कर दिया गया है।

मेरे लिए यह अभी भी 0.17 में removeClippedSubviews साथ या उसके बिना होता है। मैंने जो नोटिस किया वह यह था कि मेरी समस्या मैन्युअल रूप से सेट सामग्री ऑफसेट और initialListSize से संबंधित हो सकती है। यदि ऑफ़सेट initialListSize लिए प्रदान किए जाने वाले तत्वों की ऊंचाई से अधिक है, तो यह आवश्यक तत्वों को तब तक प्रस्तुत नहीं करेगा जब तक कि उपयोगकर्ता स्क्रॉल नहीं करता।

flexDirection: 'row' सेट वाली सूचियों के साथ भी कोई समस्या प्रतीत होती है। जब मैं इस संपत्ति को हटा देता हूं तो सभी आइटम प्रस्तुत होते हैं। यदि यह सेट है तो सूची प्रारंभ में केवल दो आइटम प्रस्तुत करती है।

नेविगेटर का उपयोग करते समय removeClippedSubviews समस्या के लिए।
आप https://github.com/machard/react-native-advanced-navigation की जांच करना चाह सकते हैं जहां समस्या नहीं होती है (शायद इसलिए कि स्क्रीन पर वास्तव में दृश्य के बाद रेंडर में देरी हो रही है)

contentContainerStyle संपत्ति में flexDirection: 'row' और flexWrap: 'wrap' सेट के साथ भी समस्या है। मेरे लिए काम करने वाला समाधान pageSize ।

प्रतिक्रिया-मूल संस्करण: 0.19.0

धन्यवाद @jittuu ने पेज को सेट करते हुए प्रोप को मेरे लिए भी किया!

पृष्ठ आकार किस पर सेट करना?

@gre यह आपके लेआउट पर निर्भर करता है। यदि आपके विचारों को पंक्तियों में व्यवस्थित किया गया है, तो पृष्ठ आकार प्रति पंक्ति आइटमों का गुणज होना चाहिए। आप सटीक मान के साथ प्रयोग करके देख सकते हैं कि यह प्रदर्शन को कैसे प्रभावित करता है।

आपको पूरी स्क्रीन को भरने के लिए पर्याप्त प्रारंभिक सूची आकार भी सेट करना चाहिए।

आपको इस कमिट में स्पष्टीकरण उपयोगी लग सकता है: https://github.com/facebook/react-native/commit/e7005f7f5429422b6f2e9c2aa29c9d57bda7b77a

@jittuu यह मेरे लिए काम किया; flexWrap का उपयोग करते समय मुझे भी बग का सामना करना पड़ रहा था।

धन्यवाद @jittuu ने पृष्ठ आकार को मूल्य 2 के साथ सेट किया है जिससे मुझे भी समस्या हल हो गई !!

सूचीदृश्य पर स्क्रॉल करते समय, ऐप को नेविगेट करने और वापस जाने पर अभी भी समस्या हो रही है।
पेजसाइज ने मदद नहीं की (मैंने 1 से 60 तक अलग-अलग मान की कोशिश की है)।

@ क्या आप प्रारंभिक सूची आकार को काफी बड़ा कर रहे हैं? क्या कोई रेपो है जिसे हम देख सकते हैं?

@jaygarcia @nicklockwood मेरे पास इस बग को पुन: पेश करने के लिए एक डेमो है, रेपो यूआरएल: ListNotRender

कदम:

1. ऐप खोलें।
2. टैबबार आइटम "#1" पर क्लिक करें।
3. सूची आइटम किसी भी स्क्रॉल तक प्रस्तुत नहीं होता है ..

मुझे यकीन है कि यह बग ListView के removeClippedSubviews प्रोप से संबंधित है, और बग केवल तभी होता है जब यह सही हो।

यह अभी भी हमारे लिए RN 0.26.0 पर हो रहा है। यहां भी वही स्थिति:

• removeClippedSubviews={true}
• ListView ऑफ-स्क्रीन प्रदान किया जाता है
• उस स्क्रीन पर जाने पर, सूचीदृश्य तब तक फिसल जाता है जब तक उपयोगकर्ता इसके साथ इंटरैक्ट नहीं करता

सीसी @javache

मेरा मानना ​​है कि यह https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e द्वारा तय किया गया है

@javache मैंने मैन्युअल रूप से उस लाइन को स्थानीय रूप से जोड़ा और इसने समस्या को ठीक नहीं किया।

मैंने इसे इसके ऊपर https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 भी लगाया लेकिन कोई सफलता नहीं मिली। ;)

आरएन 0.28 के शीर्ष पर एकल https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e प्रतिबद्ध अभी भी मेरे लिए भी बग बनाता है।

इस पर थोड़ी जांच करते हुए, मैं सोच रहा हूं कि क्या सूची दृश्य अभी भी पृष्ठभूमि में अपडेट हो रहा है (उदाहरण के लिए स्क्रॉल अपडेट के दौरान) तब भी जब यह अब दिखाई नहीं दे रहा है?

क्योंकि, वास्तव में, अगर मैं दृश्य पर स्क्रॉल करता हूं तो बग मेरे लिए आसानी से पुन: उत्पन्न होता है, नेविगेशन करते समय यह अभी भी 'गुरुत्वाकर्षण' के साथ स्क्रॉल कर रहा है , थोड़ा प्रतीक्षा करें और वापस क्लिक करें। जब तक मैं फिर से स्क्रॉल रहेगी ।
लेकिन यह मूल रूप से एकमात्र परिदृश्य है जब यह बग मेरे साथ होता है। क्या यह ~ सभी के लिए समान रेप्रो परिदृश्य है, या बग इससे अधिक व्यापक है?

वह परिदृश्य @janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment -22799032 से बहुत दूर नहीं है।

इस बग के कारण का पता लगाना कठिन है, लेकिन यहाँ मेरा 2-सेंट है:

ऐसा लगता है कि पंक्तियों को पृष्ठभूमि के दौरान _white_ प्रदान किया जाता है। स्क्रॉलव्यू को फिर से दृश्यमान बनाते समय _(उदाहरण के लिए वापस जाएं)_, वे अभी भी सफेद हैं, और वे अपडेट नहीं होते हैं _(क्योंकि उनके पास अपडेट करने का कोई कारण नहीं है, उन्हें कैश किया जाता है)_ जब तक एक नया स्क्रॉल नहीं होता है।

अगर स्क्रॉलव्यू अपने बच्चों ( updateClippedSubviews ?) (यदि पंक्तियों को पृष्ठभूमि के दौरान प्रस्तुत नहीं किया जाता है, तो उन्हें फिर कभी सफेद नहीं दिखाया जाएगा)

@ javache 1fcd73f एक या दो पंक्तियों के साथ ListView मामले को ठीक कर सकता है जो पूर्ण स्क्री नहीं भरता है। उस स्थिति में भी स्क्रॉल करें ListView सूची पंक्ति को फिर से नहीं दिखा सकता है।

मुझे बग को पुन: उत्पन्न करने का एक आसान तरीका मिल गया है:

1. RemoveClippedSubViews = true के साथ एक सूची दृश्य दिखाएं;
2. एक पंक्ति स्पर्श करें अगला पृष्ठ दर्ज करें;
3. स्क्रीन ओरिएंटेशन 90 घुमाएँ;
4. स्क्रीन को वापस घुमाएं;
5. सूची दृश्य स्क्रीन पर वापस;

सूची दृश्य रिक्त होगा, एक स्क्रीन से अधिक पंक्तियों के साथ, स्क्रॉल करें सूची दृश्य फिर से दिखाई देगा, एक स्क्रीन से कम पंक्तियों के साथ, यहां तक ​​​​कि स्क्रॉल करें सूची दृश्य किसी भी चीज़ को फिर से नहीं दिखा सकता है। 1fcd73f स्क्रॉल के साथ ListView फिर से दिखा सकता है :)

1. अभी भी इस समस्या को 0.26.3 . के रूप में देख रहे हैं
2. मेरे गैर आरएन प्रोजेक्ट पर मैंने देशी एंड्रॉइड में समस्या देखी।

हमने जो समाधान चुना वह था स्क्रॉल टू 1 पीएक्स शिफ्ट को आगे और पीछे रीफ्रेश पर करना। यह एक कामकाज है लेकिन इसने दोनों उदाहरणों में काम किया है।

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); });

@JBerendes हाँ यह हैक काम करता है।

यहां एक अधिक परिष्कृत समाधान है जो उपयोगकर्ता के स्क्रॉल को नहीं तोड़ता है:

class ...YourListAbstraction {

  _scrollY = 0;
  _lastTimeScrolled = 0;

  scrollHackToWorkaroundWhiteBug (amount) { // call at appropriated time, with -1 or 1. if possible alternate so you don't change the actual scroll over calls xD
    const { list } = this.refs;
    if (!list) return;
    if (Date.now() - this._lastTimeScrolled < 500) return; // don't mess with user scroll
    list.getScrollResponder().scrollTo({
      y: this._scrollY + amount,
    });
  }

  onScroll = ({ nativeEvent }) => { // give onScroll={this.onScroll} to ListView
    this._scrollY = nativeEvent.contentOffset.y;
    this._lastTimeScrolled = Date.now();
  };

}

अपने ListView अबास्ट्रक्शन में डालने के लिए। फिर आपको उचित समय पर scrollHackToWorkaroundWhiteBug पर कॉल करना होगा। मेरे लिए हर बार जब मैं स्क्रीन बदलता हूं (संक्रमण से पहले और बाद में)।

मुझे लगता है कि यह ListView के scrollRenderAheadDistance (क्योंकि यह स्पर्श किए जाने के बाद अन-रेंडर की गई पंक्तियों को प्रस्तुत करता है) और मैंने scrollRenderAheadDistance को 1800 से अधिक मान पर सेट करके इसे ठीक करने में कामयाबी हासिल की है। निश्चित रूप से scrollRenderAheadDistance और प्रदान की गई पंक्तियों की संख्या के बीच एक संबंध है लेकिन यह असंगत है। मैंने पाया है कि यह आमतौर पर निम्नानुसार प्रस्तुत करता है (हालांकि कभी-कभी यह सभी पंक्तियों को प्रस्तुत करेगा):

| स्क्रॉलरेंडरअहेडडिस्टेंस | प्रस्तुत पंक्तियों की संख्या |
| --- | --- |
| 1000 | 2 |
| १२०० | 2-5 |
| 1400 | 5 |
| 1600 | 6 |
| 1800 | 7+ |

मैं 80pt ऊंचाई की पंक्तियों के साथ एक सूची दृश्य प्रस्तुत कर रहा हूं। मैंने एक सूत्र निकाला है जो आपके ListView के लिए सही scrollRenderAheadDistance सेट करने में आपकी मदद करेगा:

scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)

हालांकि, मैं 680 (या 340 * 2 ) के महत्व को नहीं समझता।

संपादित करें: यह समाधान डीबग में काम करता है लेकिन रिलीज योजना नहीं (आईओएस के लिए) ...

ठीक है, removeClippedSubviews को असत्य पर सेट करने से मेरे लिए समस्या हल हो जाती है।

0.26 से 0.29 तक अपग्रेड होने तक मुझे इसका सामना नहीं करना पड़ा, इसलिए 0.27, 0.28, या 0.29 में कुछ पेश किया गया था (मैंने अभी तक 0.27 या 0.28 के खिलाफ परीक्षण नहीं किया है, लेकिन अगर इससे मदद मिलेगी तो मैं कर सकता हूं)।

@gnestor यह 0.29 में टूटा हुआ है, # 8607 और https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 जांचें

@gnestor @nihgwu मुझे पूरा यकीन है कि बग हालिया रिग्रेशन नहीं है। यह मुद्दा एक साल पहले बनाया गया है, और मैंने व्यक्तिगत रूप से RN 0.13 के बाद से इसका अनुभव किया है और हमेशा ListView के साथ "जीवित" रहने के लिए वर्कअराउंड का उपयोग किया है। removeClippedSubviews का उपयोग नहीं करने से बड़ी सूची सुस्त हो जाती है।
हो सकता है कि इसे ठीक करने का प्रयास किया गया हो या कम से कम उन मामलों को कम करने के लिए जहां बग दिखाई दे, लेकिन यह अभी भी मोटे तौर पर वैसा ही होता है जैसा इस प्रारंभिक अंक संदेश में बताया गया था।

@gre लेकिन मुझे अभी भी लगता है कि # 8607 को 0.29 में पेश किया गया था, यह वास्तव में खाली दृश्य में जाने में परेशानी है, मैं सिर्फ https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 के परिवर्तन को वापस करता हूं और सब कुछ बहुत अच्छा काम करता है removeClippedSubviews को बंद किए बिना पहले

initialListSize को उचित मान पर सेट करें और मेरी समस्या को हल करने के लिए removeClippedSubviews को गलत पर सेट करें

0.28 से 0.29 तक अपग्रेड करने के बाद यह समस्या हुई।
removeClippedSubviews={false} ने समस्या का समाधान किया।
साथ ही, मेरे मामले में, मैं ListView ऊंचाई को componentDidUpdate() पर अपडेट कर रहा हूं।
ऊंचाई-अद्यतन कोड को componentDidUpdate() में setTimeout साथ कस्टम टाइमआउट के साथ लपेटने से भी मदद मिलती है।

मैंने इसका अनुभव भी किया लेकिन यह एक लिस्ट व्यू पर था जो स्थानीय डेटा से भरा हुआ था। मैं भी इसे केवल iOS पर देख रहा था और 0.29 में अपग्रेड करने के बाद। जब मैं इसे लोड करता हूं तो सूची दृश्य this.state.dataSource.cloneWithRowsAndSections और componentDidMount का उपयोग करता है।

और इसलिए removeClippedSubviews={false} ने इसे संबोधित किया।

मेरे ListView घटक पर removeClippedSubviews सेट करना मेरे लिए भी काम करता है। डिफ़ॉल्ट Navigator घटक का उपयोग करते समय मैं केवल Release योजना के साथ 0.29 पर इस समस्या का सामना कर रहा था।

मुझे एक ही समस्या है, मैंने flexDirection: 'row' और flexWrap: 'wrap' सेट किया है, मैं RN 0.29.2 पर हूं। अन्य सूचीदृश्यों पर (जहां मैंने flexDirection: 'row' सेट नहीं किया है) मुझे वह समस्या नहीं है।

अन्य पोस्टरों की तरह त्वरित सुधार ने कहा है कि उचित प्रारंभिक सूची आकार और पृष्ठ आकार सेट करना है, लेकिन मेरा मानना ​​​​है कि वे ऐप को कम प्रतिक्रियाशील बना देंगे, उदाहरण के लिए यदि आपके पास कुछ फ़िल्टर हैं जो सूचीदृश्य के अंदर आपके पास मौजूद वस्तुओं की सूची के कुछ हिस्सों को दिखाएंगे , फ़िल्टर के बीच टैप करना धीमा होगा क्योंकि सूचीदृश्य पूरे दृश्यमान क्षेत्र को फिर से प्रस्तुत करने का प्रयास कर रहा है।

अन्य सूचीदृश्यों पर मैंने इसे प्रारंभिक सूची आकार = 0 पृष्ठ आकार = 1 सेट करके हल किया है। लेकिन मैं ग्रिड सूचीदृश्य (फ्लेक्सडायरेक्शन: 'पंक्ति' और फ्लेक्सव्रप: 'रैप') पर नहीं कर सकता।

मैं इसे आरएन v0.31.0-आरसी.0 पर मार रहा हूं।

ऐसा लगता है कि removeClippedSubviews={false} जोड़ने से समस्या ठीक हो गई है।

"removeClippedSubviews={false}" एक अच्छा समाधान नहीं लगता है, यह सभी पंक्तियों को प्रस्तुत करेगा और स्मृति प्रबंधन समस्या है। क्या किसी के पास "listView. scrollTo" और "removeClippedSubviews" को छोड़कर बेहतर समाधान है?

RN 0.31 के साथ ios 10 बीटा पर यह समस्या कहीं अधिक खराब है :-(

removeClippedSubviews ने एंड्रॉइड पर मेरी मदद नहीं की, इसके बजाय ListView से ScrollView पर जाना पड़ा।

वास्तव में बहुत बड़ा बग। मैं भी उससे मिला।

सुनिश्चित करें कि हर कोई इसे प्रोडक्ट पेन पर अपवोट करता है। यह पहले से ही काफी ऊंचा है, लेकिन अभी तक किसी के इनबॉक्स में उतरने के लिए पर्याप्त नहीं है :-( यहां लिंक है

इस बिंदु पर मैं कहूंगा कि यह शायद #8607 जैसा ही मुद्दा है। मेरी योजना के लिए इसे देखें कि इससे कैसे निपटा जाए।

0.33.0

अभी भी 0.32 . में मौजूद है

मैं कल इस बग से मिला, और removeClippedSubviews = {false} स्थापना ने काम किया।

0.33 . पर +1

हाँ, मुझे, एक ही समस्या! +1
0.33,
संपादित करें:
removeClippedSubviews = {false}, मेरे लिए भी इस मुद्दे को ठीक कर दिया।

+1

क्या आप इस पैच को https://gist.github.com/majak/b0ee1fb6ca725d2cf810d2f0ab394f2e (#8607 से) आज़मा सकते हैं और मुझे बता सकते हैं कि क्या यह इस समस्या में मदद करता है?

@majak इस पैच को साझा करने के लिए धन्यवाद। हम इसे अभी लागू करते हैं, अब यह मुद्दा चला गया है (RN 0.34)।

@majak ऐसा लगता है कि यह मेरे लिए भी ठीक है, अच्छा काम!

यह RN34 पर हो रहा है, जब removeClippedSubviews={true}

रिएक्ट नेटिव 0.34 पर यह समस्या थी।
समस्या तब हुई जब मेरे पास था:

    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',

सूचीदृश्य स्टाइल पर।

initialListSize={100}
इसे मेरे लिए तय किया

@majak क्या आप उस पैच के साथ पीआर बनाने की योजना बना रहे हैं?

@janmonschke हाँ! अपडेट के लिए लिंक की गई समस्या का पालन करें।

रिएक्ट नेटिव 0.36 . पर यह समस्या थी

मैं पुष्टि कर सकता हूं कि यह 0.36 . पर होता है

यह पूरी तरह से एमुलेटर में, केवल डिबग मोड में काम करता है, लेकिन डिवाइस पर कभी नहीं। सूची कभी भी डिवाइस पर काम नहीं करती है, ऊपर से सुझाई गई हर चीज की कोशिश की, यहां तक ​​​​कि ListView को ScrollView , जो मैं अपने एंड्रॉइड डिवाइस पर देखता हूं वह नेविगेटर है। (यहां तक ​​​​कि नेविगेटर के बाहर सूची डालने का भी प्रयास किया)
0.37

मैं अभी भी 0.36 पर इस मुद्दे को ढूंढ सकता हूं लेकिन कामकाज के लिए धन्यवाद!

मैं इसे अभी भी 0.36.1 . पर देख रहा हूँ

मैं इसे अभी भी 0.36.1 . पर देख रहा हूँ

0.31 . में मौजूद है
initialListSize={1} इसे मेरे लिए हल करें

रिएक्ट नेटिव 0.38 . पर यह समस्या थी

renderScrollComponent={(props) => <ScrollView style={flex: 1} /> }

यह संस्करण 0.38 में समस्या को ठीक करता है, मुझे नहीं पता कि यह पिछले संस्करणों में भी काम करता है या नहीं।
यह संस्करण 0.38 में समस्या को संग्रहीत करता है, मुझे नहीं पता कि क्या शुरुआती संस्करणों पर काम करते हैं

यह समस्या 0.36 पर मौजूद है।
इसे removeClippedSubviews = {false} और InitialListSize={8} के साथ काम नहीं मिल सका

1 साल से ज्यादा का समय बीत गया, यह मुद्दा अभी भी खुला है ??

अभी भी 0.39 पर मौजूद है। सेट removeClippedSubviews = {false} काम करता है।

"removeClippedSubviews={false}" एक अच्छा समाधान नहीं लगता है, मेरे पास एक नया समाधान है और यह मेरे लिए काम करता है। पैलेटफॉर्म आईओएस। RCTView.m फ़ाइल

क्या मुझे एक पीआर बनाना चाहिए?

क्या किसी ने RN0.40 पर परीक्षण किया है, मुझे RN0.40 में अपग्रेड करने के बाद इस समस्या का सामना नहीं करना पड़ता है

यह समस्या मौजूद है।
1, removeClippedSubViews = true के साथ एक सूची दृश्य दिखाएं;
2, एक पंक्ति स्पर्श करें अगला पृष्ठ दर्ज करें;
3, स्क्रीन ओरिएंटेशन 90 घुमाएँ;
4, सूची दृश्य स्क्रीन पर वापस;

ListView रिक्त होगा, एक स्क्रीन से अधिक पंक्तियों के साथ, स्क्रॉल करें ListView फिर से दिखाई देगा

@endpress मैंने आपके चरणों का पालन किया है, फिर भी RN0.41RC0 का उपयोग करके इसे पुन: पेश नहीं कर सकता

इस समस्या को 0.38 में रखें।

मेरा कामकाज 0 और 1 के बीच ListView के पैडिंगटॉप को बदल रहा है, इसलिए ListView हर बार रीफ्रेश हो जाएगा।

आप पृष्ठभूमि रंग, सीमा, आदि को बदलने का प्रयास कर सकते हैं। कृपया मुझे बताएं कि क्या अन्य गुण काम करते हैं।

@nihgwu अभी भी

यह है मुद्दा

@endpress the change (https://github.com/facebook/react-native/issues/1831#issuecomment-270552011) मेरे मामले के लिए काम करता है, और यह facebook/react-native#8607 को भी मदद कर सकता है।
मुझे पता है कि पैच अभी भी सही से बहुत दूर हो सकता है, लेकिन मैं अभी भी आपको पीआर बनाने का सुझाव देता हूं।

मेरे लिए भी प्रारंभिक सूची आकार = {0} इसे ठीक करता है rn 0.40.0

@majak क्या इस घातक समस्या के लिए कुछ अच्छी खबर है?

https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 के बारे में क्या?

फ़्लैटलिस्ट अभी भी प्रायोगिक है, इसलिए इस पर कोई गारंटी नहीं है कि इसमें कम बग हैं या पिछड़े असंगत तरीके से बदल रहे हैं, लेकिन आप इसे अपने जोखिम पर आज़मा सकते हैं।

@sahrens @gre फ़्लैटलिस्ट के शीर्ष पर एक अमूर्त परत बनाना संभव है जो पुरानी सूची दृश्य के समान एपीआई प्रदान करता है ताकि हमारा पुराना एप्लिकेशन कोड वही रख सके।

@sahrens FlatList UITableView के साथ लागू किया गया है?

एक बार जब फ़्लैटलिस्ट स्थिर हो जाता है और अब प्रयोगात्मक नहीं होता है, तो हम लिस्ट व्यू के समान एपीआई के साथ एक एडेप्टर बना सकते हैं, या हो सकता है कि हम हुड के तहत लिस्ट व्यू के कार्यान्वयन को स्वैप कर दें।

यह UITableView का उपयोग नहीं करता है। यह वास्तव में किसी भी नए मूल कोड का उपयोग नहीं करता है, यह हमारे मौजूदा मूल/ढांचे के आदिम के साथ सिर्फ जेएस है - आप यहां कार्यान्वयन को देख सकते हैं: https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32

@sahrens आपको धन्यवाद, यह काफी अच्छा और उपयोगी है।

@savanthongvanh प्रारंभिक आकार को 0 पर सेट करने से प्रारंभिक लोड पर ListView में सभी आइटम प्रस्तुत करने का प्रभाव पड़ता है। अगर आपके पास बहुत सारी चीजें हैं तो इससे सावधान रहें।

इस आरएन 0.41.2 से भी निपटना। क्या किसी के पास फ्लैटलिस्ट का सरल कार्यान्वयन है जिसे मैं कॉपी कर सकता हूं, वास्तव में जल्द ही समाधान की उम्मीद कर रहा हूं।
धन्यवाद,
रॉन

यदि आप उनके साथ खेलना चाहते हैं तो FlatList (और VirtualizedList) मास्टर में हैं।

इससे निपटने वाले किसी भी व्यक्ति के लिए फ्लैटलिस्ट के साथ अभी शुरुआत करने का एक आसान तरीका यहां दिया गया है: https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b#.xnp03gd2u

प्रारंभिक सूची आकार को उचित मान पर सेट करें और मेरी समस्या को हल करने के लिए हटाए गए क्लिप्डसबव्यू को गलत पर सेट करें

धन्यवाद @hoperce , removeClippedSubviews के साथ मेरे लिए काम करता है, initialListSize चॉपी स्क्रॉल का कारण बनता है

मेरे पास RN .42 है और मुझे यहां फ्लैटलिस्ट के लिए कोई प्रयोगात्मक काम नहीं दिख रहा है, इसलिए मैं तब तक अटका हुआ हूं जब तक कि मैं इस मुद्दे के साथ अपग्रेड नहीं कर सकता (थोड़ी देर के लिए नहीं)।

आप फ़्लैटलिस्ट कोड को हमेशा अपने ऐप में कॉपी कर सकते हैं, भले ही आप RN के नवीनतम संस्करण का उपयोग नहीं कर रहे हों।

मैं अभी भी फ़्लैटलिस्ट के साथ "वापस जाने पर पूर्ण दृश्य सफेद हो जाता है" बग को पुन: पेश कर सकता हूं। मैं सोच रहा हूं कि यह स्क्रॉलव्यू से अधिक संबंधित नहीं है।

संक्षेप में सफेद होने का मुद्दा फ्लैटलिस्ट के लिए बिल्कुल अलग और अद्वितीय है। हम इसे कम करने पर काम कर रहे हैं लेकिन यह एसिंक्रोनस विंडोड रेंडरिंग का एक मुश्किल परिणाम है। इस मुद्दे को संदर्भित करने वाला बग वह है जहां उपयोगकर्ता स्क्रॉल होने तक प्रारंभिक रेंडर पर कोई सामग्री दिखाई नहीं दे रही है, जो मुझे आशा है कि FlatList के साथ तय किया गया है।

मुझे ListView (और FlatList साथ ही) के साथ इस समस्या का भी सामना करना पड़ा है।

मुझे अभी पता चला है कि मैं अपने डेटा स्रोत को दृश्य के निर्माता में [] पर रीसेट करके और फिर इसे सेटटाइमआउट () में आइटम की सूची में रीसेट करके सूची को ठीक से प्रस्तुत करने के लिए प्राप्त कर सकता हूं।

एफवाईआई मेरी सूचीदृश्य एक TabNavigator में एक ReactNavigation StackNavigator में एम्बेडेड है।

साथ ही, 1px स्क्रॉल को ट्रिगर करने के लिए हैक प्रोग्रामेटिक रूप से अभी भी ListView / FlatList दोनों के लिए काम करता है। लेकिन आपको इसे सही जीवनचक्र पर कॉल करने की आवश्यकता है (आमतौर पर जब आप स्क्रीन पर वापस आते हैं)।

@gre : क्या आपके पास FlatList के साथ समस्या के लिए एक रेप्रो ऐप है? मैं उस फिक्स को जल्द से जल्द प्राप्त करना चाहता हूं!

@gre , क्या आपके पास इसके लिए उदाहरण कोड है? और क्या आपका मतलब उस घटक के लिए घटकविलमाउंट में है जिसमें सूची दृश्य शामिल है?

@ericvicenti - ऐसा लगता है कि यह आरएन से कोड के कुछ अन्य टुकड़े लेता है। मैं चिंतित था कि यह कहीं और से बिट्स और टुकड़े उधार लेने वाला था। मैं इसे बाहर निकाल सकता हूं। शायद इसे अन्य लोगों के उपयोग के लिए रेपो में फेंक दें - क्या इसकी अनुमति है?

@sahrens खेद है कि यह मेरी कंपनी ऐप में है, लेकिन शायद मैं इसे

@natdm एक टिप्पणी में थोड़ा ऊपर: https://github.com/facebook/react-native/issues/1831#issuecomment -231069668 - यह मूल विचार है, मैंने इससे कमोबेश एक प्रणाली के साथ विचलन किया है एक -1 पीएक्स और 1 पीएक्स के बीच वैकल्पिक ताकि यह समय के साथ एक स्क्रॉल जमा न करे XD विशाल हैक

मुझे यह समस्या सेक्शनलिस्ट के साथ आ रही है - जब तक मैं स्क्रॉल नहीं करता तब तक प्रारंभिक रेंडर पर खाली। @sahrens क्या दृष्टि में कोई सुधार है?

@smkhalsa क्या आपके पास एक स्पष्ट

@sahrens ऐसा लगता है कि removeClippedSubviews={false} सेट करना मेरे लिए इसे ठीक करता है। इसके बिना, हर बार जब मैं इस विशेष दृश्य पर नेविगेट करता हूं तो मुझे एक खाली स्क्रीन मिलती है।

मैं इस मुद्दे को एक नए रेपो में अलग करने की कोशिश करूंगा और अगर मैं कर सकता हूं तो इसे पोस्ट करूंगा।

मेरे लिए वही (हटाएं क्लिप्डसबव्यू निश्चित रूप से बग के लिए एक ट्रिगर है)। हमारे ऐप में हमारे पास एक आसान रेप्रो था जिसमें प्रतिक्रिया-मूल-टैब-व्यू के अंदर सूचियां हैं। हालांकि मुझे नहीं पता कि एक आसान उदाहरण इसे दोबारा करेगा या नहीं।

मेरे उत्तर के 2 अंतिम पैराग्राफ यहां देखें https://github.com/facebook/react-native/issues/1831#issuecomment -228775913

मुझे लगता है कि यह उसके आसपास कुछ हो सकता है (सिर्फ एक परिकल्पना):

(१) सूची एक पृष्ठभूमि टैब में प्रस्तुत की जाती है, क्योंकि वे 'बाउंडिंग बॉक्स से बाहर' हैं, removeClippedSubviews मान लेंगे कि वे यहां नहीं हैं और कुछ भी प्रस्तुत नहीं करेंगे (सफेद)
(२) जब टैब फोकस पर जाता है, और क्योंकि वह टैब शायद <StaticContainer> जैसे कुछ का उपयोग करता है, कुछ भी 'ताज़ा' नहीं होता है, यह अभी भी सफेद है
(३) जैसे ही उपयोगकर्ता 'स्क्रॉल' करेगा, आप removeClippedSubviews लॉजिक को रीफ्रेश करते हैं जो अब निर्धारित करता है कि सूची सेल दृश्यमान हैं और उन्हें रीफ्रेश करें।

लीड के लिए धन्यवाद @ग्रे

अभी भी RN 0.41.2 पर मौजूद है, Android ठीक है, बस ios10, सेट removeClippedSubviews={false} इस समस्या को हल कर सकता है। मेरी सूची दृश्य छोटा है, इसलिए कोई बड़ी समस्या नहीं है। TabNavigator (प्रतिक्रिया-नेविगेशन) के एक स्टैक नेविगेटर के अंदर सूची देखें।

 render() {
    return (
      <View style={{ flex: 1, justifyContent:'center'}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow.bind(this)}
          removeClippedSubviews={false}
        />
      </View>
    );
  }

यहाँ वही मुद्दा। जोड़ने के लिए और कुछ नहीं, इसके अलावा removeClippedSubviews={false} ने इसे मेरे लिए भी हल कर दिया।

@agentilela ठीक करने के लिए धन्यवाद, यहाँ एक ही समस्या है

removeClippedSubviews={false} स्थापना ने इसे ठीक कर दिया

इस मुद्दे मौजूद प्रतिक्रिया देशी-नक्शे में MapView जो AFAIK का उपयोग नहीं करता ScrollView और साथ कोई संबंध नहीं है ListView ।

समस्या अभी भी RN44 में हो रही है, initialListSize={200} समस्या का समाधान करता है, लेकिन मुझे नहीं लगता कि यह एक अच्छा दीर्घकालिक समाधान है क्योंकि इसे प्रदर्शित करने से पहले इसे प्रस्तुत करने में कुछ समय लगता है। सूची दृश्य में यह स्पष्ट है कि 100 से अधिक पंक्तियाँ हैं।

ps removeClippedSubViews={false} मेरी समस्या का समाधान नहीं करता है

removeClippedSubViews={false} ने मेरे लिए ListView लिए काम किया।
साथ ही, FlatList में भी यही समस्या है।

मुझे ListView/FlatList और प्रतिक्रिया-नेविगेशन के साथ एक ही समस्या है।
मैं के साथ यह तय कर दी है lazy: true TabNavigator विकल्पों में और removeClippedSubViews={false} ListView में

मैं यह भी पुष्टि कर सकता हूं कि बग आरएन 0.44.0 में होता है:

प्रतिक्रिया-नेविगेशन + TabNavigator + (ListView या FlatList) का उपयोग करते समय होता है।
जब आप किसी टैब पर जाते हैं तो वह खाली दिखता है। केवल जब आप थोड़ा स्क्रॉल करते हैं, तो सूची दिखाई जाती है।

एकमात्र टैब जहां यह नहीं हो रहा है TabNavigator के प्रारंभिक रूटनाम में है

जैसा कि उल्लेख किया गया है, आलसी सेट करना: सच है। TabNavigator इसे हल करता है।

यहाँ एक ही समस्या, removeClippedSubViews के साथ तय की गई है
जैसा कि डुप्लिकेट अंक में वर्णित है https://github.com/facebook/react-native/issues/14069
मैंने https://github.com/jcharlet/react_native_listview_bug इस मुद्दे को पुन: उत्पन्न करने के लिए एक रेपो बनाया है यदि यह किसी भी मदद का हो सकता है।

साथ ही यह समस्या उसी उपयोग के मामले के लिए 'प्रतिक्रिया-नेविगेशन' के बजाय 'प्रतिक्रिया-मूल-राउटर-प्रवाह' का उपयोग करते समय नहीं होती है

TabNavigator में प्रतिक्रिया-नेविगेशन के साथ कुछ समस्या। removeClippedSubViews={false} मदद नहीं करता है।

मेरे लिए वही समस्या। प्रश्न में टैब में एक बच्चे के रूप में TabNavigator और एक StackNavigator के साथ प्रतिक्रिया-नेविगेशन का उपयोग करना, और सादा ListView। RN ०.४४ / एक्सपो १७, और न तो हटाएँClippedSubviews और न ही आलसी ने मेरे लिए मदद की:-/

removeClippedSubviews ने मुझे आईओएस संस्करण को ठीक करने में मदद की, लेकिन एंड्रॉइड के लिए मुझे प्रारंभिक लिस्टसाइज का उपयोग करना पड़ा

साथ में

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.2",
    "react-navigation": "1.0.0-beta.11"
}

और lazy: true में TabNavigator के TabNavigatorConfig सब कुछ अच्छी तरह से प्रस्तुत करता है:

const AppNavigator = TabNavigator({
  HomeTab: {
    screen: HomeScreen,
    path: '/'
  },
  PeopleTab: {
    screen: PeopleNavigator,
    path: '/people',
  }
}, {
  lazy: true
});

const PeopleList = ({ people }) => {
  return (
    <FlatList
      data={people}
      renderItem={({item}) => <Text>{item.name}</Text>}
    />
  );
};

में अपग्रेड करना
{
"प्रतिक्रिया-मूल": "0.44.2",
"प्रतिक्रिया-नेविगेशन": "1.0.0-बीटा.11"
}
मेरे लिए काम किया, आलसी = सच StackNavigator के लिए आवश्यक नहीं लगता है

{
"प्रतिक्रिया-मूल": "0.44.2",
"प्रतिक्रिया-नेविगेशन": "1.0.0-बीटा.11"
}
आलसी = सच
निकालेंक्लिप्डसबव्यू = {झूठा}
काम नहीं करता

यह वास्तव में दिलचस्प है, मैं देखना चाहता हूं कि यह 2 साल की बग आखिरकार कब बंद होगी।

मैंने प्रतिक्रिया-मूल 0.44.2, प्रतिक्रिया-नेविगेशन 1.0.0-बीटा.11 में अपग्रेड किया, और प्रश्न में TabNavigator पर "आलसी = सत्य" सेट किया और इसे ठीक किया। शायद बस आलसी सेट करना = सच करना चाल चल जाएगा, लेकिन मैंने पहले ही अपडेट कर दिया था।

@jhalborg मैंने FlatList और removeClippedSubViews = {false} के साथ सूचियों के लिए समस्या तय की है।

मैं प्रतिक्रिया-नेविगेशन का उपयोग कर रहा हूँ और इस संरचना के साथ मेरे लिए removeClippedSubViews काम करता है:

मोडल स्टैक -> वर्तमान टैब स्टैक -> नेविगेशन स्टैक के साथ कई टैब शामिल करें

मेरी समस्या प्रदर्शन की कमी थी इसलिए मैंने राज्य मूल्य के आधार पर removeClippedSubViews मान बना दिया है ताकि स्क्रीन लोड हो रहा है या नहीं, इसके आधार पर मैं इसे चालू/बंद कर सकता हूं।

मेरे पास कुछ सूचियां हैं जो किसी अन्य टैब पर पुनः लोड होती हैं इसलिए मैं निम्न की तरह कुछ उपयोग करता हूं:

constructor (props) {
   super(props)

   this.state = { removeClippedSubViews: false }
} 

componentDidMount () {
  this.setState({ removeClippedSubViews: true })
}

resetData () {
  const callback = (newRecords) => {
    this.setState({ removeClippedSubViews: true, records: newRecords })
  }

  this.setState({ removeClippedSubViews: false, records: [] }, () => {
    someDataHelper.reloadData(callback)
  })
}

render () {
  return (
    <ListView removeClippedSubViews={this.state. removeClippedSubViews} />
  )
}

मुझे आशा है कि यह किसी की मदद करता है क्योंकि यह मुझे थोड़ी देर के लिए परेशान कर रहा था लेकिन एक बहुत ही आसान समाधान बन गया।

ऐसा लगता है कि इस समस्या को अब निम्न कारणों से बंद किया जा सकता है:

• हम अनुशंसा कर रहे हैं कि लोग अब FlatList/SectionList का उपयोग करें, ListView में कोई एन्हांसमेंट नहीं आएगा।
• ऐसा लगता है कि धागे में एक उचित कामकाज की पहचान की गई है।

विचार?

क्या यह असली बग नहीं है? यदि हां, तो मामले को बंद क्यों किया जा रहा है ?

कारणों के बारे में:

• यह फ्लैटलिस्ट पर भी होता है, इसलिए यह केवल सूची दृश्य समस्या नहीं है।

• removeClippedSubViews हटाना प्रदर्शन लागत के साथ एक हैक की तरह लगता है, मेरी राय में उचित समाधान नहीं है।

यह पुष्टि करना कि यह अभी भी FlatList/SectionList के भीतर एक सक्रिय बग है।

फ़्लैटलिस्ट/सेक्शनलिस्ट के प्रदर्शन से संबंधित कुछ मुद्दे भी हैं, जिसका अर्थ है कि कुछ लोग अभी तक लिस्ट व्यू से नहीं जा सकते हैं, ऐसा लगता है कि इसे पहले से ही हटा दिया गया है।

क्या मैंने ऊपर जो कुछ पोस्ट किया है, उसे स्वयं घटकों में एकीकृत किया जा सकता है?

ListView से माइग्रेट करने में आपको किन समस्याओं का सामना करना पड़ा है?

13727

मैं कोई विवरण नहीं देख रहा हूँ जहाँ ListView बेहतर है। ध्यान दें कि यदि आपके लिए यह कोई समस्या है तो आप विंडो का आकार बढ़ा सकते हैं या वर्चुअलाइजेशन बंद कर सकते हैं, क्योंकि ListView इनमें से कोई भी काम नहीं करता है।

मैं उनसे आगे बढ़ने से पहले आपके द्वारा पूछे गए सवालों के जवाब देने की प्रतीक्षा करूंगा, लेकिन यह बिंदु के बगल में है, यह समस्या अभी भी फ़्लैटलिस्ट पर होती है और इसे खुला रहना चाहिए।

केवल सामान्य सामुदायिक ज्ञान के लिए।

मैं अपने परिदृश्य में इस मुद्दे पर आया जहां मैं नेस्टेड लिस्ट व्यू यानी लिस्ट व्यू का लिस्ट व्यू पंक्ति के भीतर उपयोग कर रहा हूं। नेस्टेड लिस्ट व्यू में removeClippedSubviews={false} लागू करके मेरा समाधान तय किया गया था।

react-native-cli: 2.0.1
react-native: 0.41.2

iOS 9.x पर चलने वाले iPad 3/iPad Mini जैसे पुराने हार्डवेयर में ListView / FlatList / VirtualizedList / WindowedListView (जो भी) का उपयोग करके बड़ी सूचियों में एक सहज स्क्रॉल करना असंभव है।

नोट: मैं फ्लैट सूचियों के बारे में बात कर रहा हूं, कोई चित्र नहीं, केवल पंक्तियों में पाठ घटक।

कोई व्यक्ति 7000 रिकॉर्ड के डेटासेट के साथ एक कार्यात्मक उदाहरण साझा कर सकता है जहां स्क्रॉल सुचारू है और तड़का हुआ नहीं है, मैं सभी विशेषताओं के विन्यास की कोशिश करता हूं और कोई भाग्य नहीं

सहमत - मैं स्मृति प्रबंधन के लिए आउट-ऑफ-व्यू कक्ष भी साफ़ कर रहा हूं। यह शर्म की बात है कि कई ऐप्स में इस तरह के एक आवश्यक घटक में बहुत सारे उपयोग के मामलों में प्रदर्शन की कमी है। मैं अगले सप्ताह में इसमें गहराई से गोता लगाऊंगा या नहीं, यह देखने के लिए कि क्या कोई महत्वपूर्ण प्रदर्शन लाभ किया जाना है।

१० जून २०१७ को अपराह्न ३:३० +१०००, एरियल फाल्डुटो नोटिफिकेशन @github.com ने लिखा:

iOS 9.x पर चलने वाले iPad 3/iPad Mini जैसे पुराने हार्डवेयर में ListView / FlatList / VirtualizedList / WindowedListView (जो भी) का उपयोग करके बड़ी सूचियों में एक सहज स्क्रॉल करना असंभव है।
नोट: मैं फ्लैट सूचियों के बारे में बात कर रहा हूं, कोई चित्र नहीं, केवल पंक्तियों में पाठ घटक।
कोई व्यक्ति 7000 रिकॉर्ड के डेटासेट के साथ एक कार्यात्मक उदाहरण साझा कर सकता है जहां स्क्रॉल सुचारू है और तड़का हुआ नहीं है, मैं सभी विशेषताओं के विन्यास की कोशिश करता हूं और कोई भाग्य नहीं
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें, या थ्रेड को म्यूट करें।

बहुत बढ़िया @lprhodes , यहां मैं फ्लैटलिस्ट का उपयोग करके ~ 200 रिकॉर्ड्स के साथ एक साधारण उपयोग केस साझा करता हूं, यह उदाहरण आईओएस 9 के साथ आईपैड 3 पर तड़का हुआ है।

import React, { Component } from 'react';
import {
  FlatList,
  StyleSheet,
  View,
} from 'react-native';
import Expo from 'expo';
import {
  Text,
  ListItem,
  SearchBar,
} from 'react-native-elements';

class Feed extends Component {

  loadFeed() {
    const {data} = this.props;
    const sections = [];
    data.forEach((value, index) => {
      const sectionName = value.name_line_sp;
      const section = sections.find((section) => {
        return section.title === sectionName;
      });
      if (section) {
        section.data.push(value);
      } else {
        sections.push({
          title: sectionName,
          data: [value]
        });
      }
    });
    if (__DEV__) {
      console.log('Sections size', sections.length);
    }
    return sections[0];
  }

  componentDidMount() {
    this.flatListRef.scrollToOffset({
      animated: false,
      offset: 48
    });
  }

  render() {
    const feed = this.loadFeed();
    return (
      <View style={{flex: 1}}>
        <Text h5 style={styles.section_title}>{feed.title} ({feed. data.length})</Text>
        <FlatList
          style={{flex: 1}}
          ref={(list) => { this.flatListRef = list; }}
          debug
          ListHeaderComponent={() => (
            <SearchBar
              lightTheme
              placeholder='Search...' />
          )}
          data={feed.data} // ~217 records
          keyExtractor={(item) => (
            item.code_group
          )}
          renderItem={({ item }) => {
            return (
              <ListItem
                hideChevron
                key={item.code_group}
                title={`${item.name_group_sp}`}
                subtitle={`${item.price_prod}`}
                containerStyle={{ backgroundColor: 'white' }}
              />
            );
          }}
        />
      </View>
    )
  }
}

import catalog from './data/catalog.json'; 

class App extends Component {
  render() {
    const data = catalog;
    return (
      <View style={styles.container}>
        <Text h3 style={styles.title}>Skillcase</Text>
        <Feed data={data} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title: {
    margin: 20,
    marginBottom: 10,
    color: 'white'
  },
  section_title: {
    padding: 20,
    color: 'white',
    backgroundColor: '#1976D2',
  },
  container: {
    flex: 1,
    paddingTop: Expo.Constants.statusBarHeight,
    backgroundColor: '#42A5F5',
  },
});

Expo.registerRootComponent(App);

या एक्सपो यूरी : क्स्प : v-xvw.outatime.skillcase.exp.direct :80

धन्यवाद !!!

आपके उदाहरण कोड में कई खराब प्रथाएं हैं जिन्हें दस्तावेज़ीकरण में संबोधित किया गया है। उदाहरण के लिए, आप लगातार कार्यों को फिर से बना रहे हैं और रीबाइंड कर रहे हैं, जो सीपीयू पर एक कर है और आपकी सूची वस्तुओं के अनावश्यक पुन: प्रस्तुत करने का कारण बनता है। आपको यह सुनिश्चित करना चाहिए कि आपका ListItem घटक एक PureComponent है, और सुनिश्चित करें कि इसमें पास किए गए सभी प्रॉप्स अनावश्यक री-रेंडर को रोकने के लिए उथले-बराबर रहें। यह आपके बाकी ऐप के लिए भी अच्छा अभ्यास है।

इससे बहुत मदद मिलनी चाहिए, लेकिन मैं धीमे उपकरणों पर पूर्ण पूर्णता की गारंटी नहीं दे सकता। वेब ब्राउज़र जैसे अन्य ऐप्स उन उपकरणों पर कितना बेहतर काम करते हैं?

@outaTiME आपको प्रत्येक रेंडर पर लोडफीड को कॉल नहीं करना चाहिए

@lprhodes रेंडर विधि केवल एक को निष्पादित करती है, btw मैं कुछ सर्वोत्तम प्रथाओं का उपयोग करके कोड को अपडेट करता हूं और अभी भी iOS 9 के साथ iPad 3 पर तड़का हुआ हूं (iPhone 7 में सभी सुचारू हो जाते हैं), मैं कुछ गलत @sahrens करता रहता हूं? आपकी सलाह के लिए शुक्रिया।

import React, { Component, PureComponent } from 'react';
import {
  FlatList,
  ListView,
  Text,
  StyleSheet,
  View,
} from 'react-native';
import Expo from 'expo';
import {
  ListItem,
  SearchBar,
} from 'react-native-elements';

class FeedRow extends PureComponent {

  render() {
    const item = this.props.data;
    return (
      <Text>{item.name_group_sp}</Text>
    )
  }

}

class Feed extends Component {

  constructor(props) {
    super(props);
    this.storeListRef = this.storeListRef.bind(this);
  }

  loadFeed() {
    const {data} = this.props;
    const sections = [];
    data.forEach((value, index) => {
      const sectionName = value.name_line_sp;
      const section = sections.find((section) => {
        return section.title === sectionName;
      });
      if (section) {
        section.data.push(value);
      } else {
        sections.push({
          title: sectionName,
          data: [value]
        });
      }
    });
    if (__DEV__) {
      console.log('Sections size', sections.length /*, images.length */);
    }
    return sections[0];
  }

  componentDidMount() {
    this.flatListRef.scrollToOffset({
      animated: false,
      offset: 48
    });
  }

  renderItem(item) {
    return (
      <FeedRow data={item.item} />
    );

  }

  keyExtractor(item) {
    return item.code_group;
  }

  listHeaderComponent() {
    return (
      <SearchBar
        lightTheme
        placeholder='Buscar...' />
    );
  }

  storeListRef(list) {
    this.flatListRef = list;
  }

  render() {
    const feed = this.loadFeed();
    return (
      <View style={{flex: 1}}>
        <Text h5 style={styles.section_title}>{feed.title} ({feed. data.length})</Text>
        <FlatList
          style={{flex: 1}}
          ref={this.storeListRef}
          debug
          // pagingEnabled
          ListHeaderComponent={this.listHeaderComponent}
          data={feed.data} // ~217 records
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
        />
      </View>
    )
  }

}

import catalog from './data/catalog.json';

class App extends Component {

  render() {
    const data = catalog;
    return (
      <View style={styles.container}>
        <Text h3 style={styles.title}>Skillcase</Text>
        <Feed data={data} />
      </View>
    );
  }

}

const styles = StyleSheet.create({
  title: {
    margin: 20,
    marginBottom: 10,
    color: 'white'
  },
  section_title: {
    padding: 20,
    color: 'white',
    backgroundColor: '#1976D2',
  },
  container: {
    flex: 1,
    paddingTop: Expo.Constants.statusBarHeight,
    backgroundColor: '#42A5F5',
  },
});

Expo.registerRootComponent(App);

बेहतर है, लेकिन debug सेट करने से चीजें एक टन कम हो जाएंगी। प्रदर्शन का मूल्यांकन करते समय आपको यह भी सुनिश्चित करना चाहिए कि आप एक अनुकूलित उत्पादन निर्माण चला रहे हैं, न कि एक देव/डीबग बिल्ड। अंत में, आप अभी भी हर रेंडर में एक नई स्टाइल ऑब्जेक्ट बना रहे हैं, और आप ऑनमाउंट में स्क्रॉलटॉफ़सेट को कॉल करने के बजाय इनिशियलस्क्रॉलपोज़िशन का उपयोग कर सकते हैं।

@sahrens yup बिना debug ध्वज के और ऑप्टिमाइज़ प्रोडक्शन बिल्ड के साथ बेहतर कम तड़का हुआ चलता है, जैसा कि मैंने एक्सपो 17 का उपयोग करने से पहले कहा था जो प्रतिक्रिया-मूल 0.44 का उपयोग करता है, मुझे लगता है कि प्रतिक्रिया-मूल का नया संस्करण (0.45 ) में FlatList में सुधार हुआ है।

बीटीडब्ल्यू, हर रेंडर में स्टाइल क्यों बनाते हैं? इस मामले में flex शैलियों ( Feed घटक में) के साथ रेंडर केवल एक बार निष्पादित किया जाता है:

1. App रेंडर
2. Feed रेंडर
3. फिर कई FeedRow रेंडर

जैसा कि @lprhodes ने मुझे प्रत्येक रेंडर पर लोडफीड के बारे में बताया, मैं समझता हूं कि Feed रेंडर केवल एक बार निष्पादित किया जाता है, क्या यह सही है?

जब आप initialScrollPosition तो आपका मतलब initialScrollIndex सही है? यह scrollToOffset तरह काम नहीं करता है जब Feed माउंट होने पर मुझे ListHeaderComponent (ऊंचाई का 48px) छिपाने की आवश्यकता होती है

इस कंसोल चेतावनी के बारे में क्या? मैं renderItem के लिए PureComponent का उपयोग कर रहा हूं?

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"dt":85588,"prevDt":1497296394821,"contentLength":10023}

धन्यवाद !!

वह चेतावनी एक प्रकार की बग है जिसे मास्टर पर ठीक कर दिया गया है, लेकिन आपके प्रारंभिक माउंट के लिए 85 सेकंड पागल धीमा है - आपको यह पता लगाने के लिए वास्तव में अपने कोड में गहराई से खोदना चाहिए कि इतना समय क्या हो रहा है। वहाँ कई संसाधन हैं यदि आप प्रतिक्रिया प्रदर्शन के लिए गूगल करते हैं, या मदद के लिए व्यापक प्रतिक्रिया समुदाय में पूछते हैं।

और हाँ, मेरा मतलब था initialScrollIndex । इसे काम करने के लिए आपको getItemLayout लागू करना होगा, जिसका हिसाब ListHeaderComponent होना चाहिए।

महान @sahrens , मुझे पुराने हार्डवेयर जैसे iPad 3 या OS संस्करण iOS 9 से डर लगता है ... नए उपकरणों पर परीक्षण में कोई प्रदर्शन समस्या नहीं है, मैं जानना चाहता था कि क्या किसी और को भी उसी हार्डवेयर समस्या का सामना करना पड़ रहा है ... थोड़ी देर में मैं समुदाय से यह देखने के लिए कहूँगा कि क्या मैं कुछ और गहराई तक पहुँचता हूँ, धन्यवाद !!!

हाय मेरा फिक्स फ्लैट सूची को style={{ backgroundColor: 'white' }} देकर

तो @hramos और @sahrens , FlatList के साथ इस मुद्दे के लिए वास्तव में सबसे अच्छा समाधान क्या है? प्रतिक्रिया के साथ इस में चल रहे 0.44.0 का उपयोग कर react-native-tab-vew , और यह वास्तव में स्पष्ट नहीं कर रहा है क्या कोर टीम इस समय की सिफारिश की जाती है।

@sjmueller @sahrens नहीं कहा कि यह पहले से ही मास्टर में तय हो गई है?

@hramos मैंने अभी इस पूरे सूत्र की फिर से समीक्षा की है। मैं इसे याद कर सकता था, लेकिन कहीं भी मैंने @sahrens का उल्लेख नहीं किया कि FlatList अदृश्य हो रहा है मास्टर पर तय किया गया है। न ही मैंने कोई कमिट/पीआर देखा जो इस मुद्दे का संदर्भ देता है, और अंत में समस्या को ठीक करने के लिए कोई अनुशंसित समाधान नहीं है।

मैं देखता हूं कि @yaronlevi lazy={true} को react-native-tab-view या TabNavigator पर सेट करने की अनुशंसा करता है, लेकिन यह आईफोन 7 प्लस पर भी अजीब देरी का कारण बनता है।

@knappdev का कहना है कि यह 0.44.2 और उसके बाद lazy बिना काम करता है, इसलिए मैं 0.44.0 से अपग्रेड करने का प्रयास करूंगा और देख सकता हूं कि मुझे सफलता मिली है या नहीं।

मेरा काम यह है कि फ़्लैटलिस्ट उपयोग में है या नहीं, इस पर निर्भर करता है कि रिमूवक्लिप्ड सबव्यूज़ को चालू/बंद करना है।

  constructor (props) {
    super(props)

    this.state = { removeClippedSubviews: false }

    this._disableRemoveClippedSubviews = this._disableRemoveClippedSubviews.bind(this)
    this._onViewableItemsChanged = this._onViewableItemsChanged.bind(this)
    this._renderItem = this._renderItem.bind(this)
  }

  _disableRemoveClippedSubviews () {
    this.setState({ removeClippedSubviews: false })
  }

  _onViewableItemsChanged({ viewableItems, changed }) {
    if (!this.state.removeClippedSubviews) this.setState({ removeClippedSubviews: true })
    if (this._disableRemoveClippedSubviewsTimeout) clearTimeout(this._disableRemoveClippedSubviewsTimeout)
    this._disableRemoveClippedSubviewsTimeout = setTimeout(this._disableRemoveClippedSubviews, 3000)
  }

  render () {    
    const { removeClippedSubviews } = this.state

    return (
      <FlatList
        renderItem={this._renderItem}
        removeClippedSubviews={removeClippedSubviews}
        onViewableItemsChanged={this. _onViewableItemsChanged}
      />
    )
  }

हटाएँClippedSubviews अब फ़्लैटलिस्ट के लिए डिफ़ॉल्ट रूप से बंद है।

धीमे उपकरणों पर समस्याओं के लिए, क्या आपने RNTester ऐप FlatListExample को आजमाया है?

FlatListExample आपके लिए कैसा प्रदर्शन करता है?

हटाएँClippedSubviews अब फ़्लैटलिस्ट के लिए डिफ़ॉल्ट रूप से बंद है।

हाँ - यही कारण है कि वास्तव में स्क्रॉल करते समय मैं इसे चालू करता हूं। मुझे इस तरह से कम यादृच्छिक झटके मिलते हैं।

मैं तब (दूर) दृश्य कक्षों को खाली वाले के साथ प्रतिस्थापित करता हूं ताकि फ़्लैटलिस्ट की तुलना में अधिक सुनाई देने वाली मेमोरी को कम किया जा सके

तो, अंत में, अभी भी removeClippedSubviews={false} का उपयोग करने के बजाय इसे ठीक करने का कोई तरीका नहीं है, यहां तक ​​​​कि यह प्रदर्शन इतना कठिन है?

मेरे लिए फिक्स आईओएस सिम्युलेटर के लिए दूरस्थ रूप से डिबगिंग जेएस को अक्षम करना था

ऐसा लगता है कि lazy: true सेट करना मेरे लिए काम कर गया है। अभी तक पूर्ण परीक्षण नहीं किया है।

मैं इस मुद्दे को removeClippedSubViews={false} द्वारा हल करता हूं

सबसे अच्छा काम
सभी हार्डवेयर/सिम्युलेटर पर काम करता है। removeClippedSubViews={false} हमेशा iPhone 7 पर काम नहीं करता है।

सूची दृश्य में आंदोलन को बाध्य करना सुनिश्चित करें।

componentDidMount() {
   requestAnimationFrame(() => {
      // HACK TO RELOAD DATA
      this.refs._list.scrollTo({x: 1, y: 0, animated: false})
    });
}

संदर्भ का उदाहरण।

 <ListView
     ref="_list"
     dataSource={this.state.dataSource}
     renderRow={(data, sectionId, rowId) => <Row
        rowId={rowId}
        selectedRow={this.state.selectedRow}
        onPressRow={this._pressRow.bind(this)}
        {...data}/>}
     renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
     removeClippedSubViews={false}
     initialListSize={SortedBrandList.count}/>

समस्या यह है कि इसे पहले ही माउंट किया जा सकता है

२४ अगस्त २०१७ को अपराह्न ३:४४ बजे पीटर सुवारा नोटिफिकेशन @github.com ने लिखा:

चारों ओर काम करें
सभी हार्डवेयर/सिम्युलेटर पर काम करता है।

'''घटकडिडमाउंट () {
अनुरोधएनीमेशनफ्रेम (() => {
// डेटा पुनः लोड करने के लिए हैक करें
this.refs._list.scrollTo({x: 1, y: 0, एनिमेटेड: असत्य})
});
}'''

'''
रेफरी = "_ सूची"
डेटा स्रोत = {यह। राज्य। डेटा स्रोत}
रेंडररो = {(डेटा, सेक्शनआईडी, रोआईड) => }
रेंडरसेपरेटर = {(सेक्शन आईडी, पंक्ति आईडी) =>}
निकालेंक्लिप्डसबव्यू = {झूठा}
प्रारंभिक सूची आकार = {SortedBrandList.count}
/>'''

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें, या थ्रेड को म्यूट करें।

मैंने इस मुद्दे को हल किया, कम से कम सिम्युलेटर पर, इसके साथ:

<ListView removeClippedSubViews={false} .... />

मेरा अनुमान यहां यह है कि जब सूची दृश्य वर्तमान में स्क्रीन पर नहीं है तो क्लिप किए गए सबव्यूज़ को प्रबंधित करने वाली दिनचर्या सीमाओं की ठीक से जांच नहीं कर रही है। यह अक्सर किसी भी ListView घटक के साथ होता है जो ऑफस्क्रीन प्रस्तुत करता है और फिर स्क्रीन पर चलता है। यह ठीक करने के लिए एक बग के लिए बहुत कठिन नहीं होना चाहिए।

मुझे पूरा यकीन है कि यह फ़ंक्शन समस्या है: https://github.com/facebook/react-native/blob/master/React/Views/RCTView.m#L321 -L369

मेरा अनुमान है कि यह जिस निर्देशांक स्थान को माप रहा है वह कहीं गलत है। अब इसे देख रहे हैं।

यह ठीक हो सकता है? https://github.com/facebook/react-native/pull/15669/files

इसके लिए अभी भी कोई फिक्स नहीं है?

@petersuwara : आपने क्या काम प्रस्तावित किया। धन्यवाद। @MattFoley : आपका फ़िक्स डाउनलोड के लिए कब उपलब्ध होगा?

केवल फ़्लैटलिस्ट के लिए विशिष्ट नहीं, इसे सूची दृश्य में भी लोड करने में एक समस्या प्रतीत होती है।
मुझे डेटा स्रोत सेट करने में थोड़ी देरी का उपयोग करके एक वैकल्पिक हल मिला।

जब डेटा कंपोनेंटविलमाउंट विधि में किसी दूरस्थ स्रोत से लोड किया जाता है, तो निम्न कोड चलाया जाता है।
काम करने लगता है:

setTimeout(function(){
       this.updateDataSource(array,newArray)
},30)

updateDataSource = (comments,dataSource) =>{
        this.setState({
            allComments:comments,
            dataSource: this.state.dataSource.cloneWithRows(dataSource),
            isLoading:false

        })
}

और थोड़ी देरी के दौरान आप हमेशा एक लोडिंग स्क्रीन दिखा सकते हैं। यह इतना छोटा है कि दिखाई भी नहीं देता।

मुझे @nathvarun का काम करने का तरीका मिल गया है। घटक बढ़ते धागे और घटक के अद्यतन डेटा स्रोत थ्रेड के बीच कुछ दौड़ की स्थिति प्रतीत होती है। अगर वास्तव में ऐसा है तो मैं उलझन में हूं कि ऐसा क्यों होगा क्योंकि दो धागे एक दूसरे के साथ अनुक्रमिक रूप से अच्छे खेलना चाहिए।

यह उन घटकों में होता है जो पहले से ही माउंट किए गए हैं जैसे कि प्रतिक्रिया-नेविगेशन में टैब को असाइन की गई स्क्रीन लेकिन वर्तमान में अधिक चयनित हैं - इसलिए मुझे यकीन नहीं है कि घटक में संशोधन कैसे इसे ठीक कर सकता है।

ऐसा लगता है कि मेरे पीआर ने समस्या को ठीक कर दिया है, लेकिन मुझे इसका विलय करने का कोई सौभाग्य नहीं मिला है। क्या कोई और उस पीआर पर झंकार करना चाहेगा?

@MattFoley इसका विलय हो रहा है या नहीं। मैं अब आपके कोड का उपयोग कर रहा हूं। और यह वास्तव में मेरी समस्या को ठीक करता है।

TabNavigator के react-navigation को lazy: true कॉन्फ़िगर करना भी काम करता है... लेकिन इसे react-native द्वारा तय करके देखना बहुत अच्छा होगा।

यदि आप सेक्शनलिस्ट या फ़्लैटलिस्ट का उपयोग कर रहे हैं, तो बस ref = {(ref) => this.sectionList = ref} का उपयोग करें।
और आपके कोड में this.sectionList.recordInteraction() - को आपका विचार प्रस्तुत करना चाहिए

@MattFoley के प्रस्तावित फ़िक्स को मर्ज कर दिया गया है, और अब यह 0.50 रिलीज़ का हिस्सा है: https://github.com/facebook/react-native/commit/03ae65bc25185fe6d7f62e66f5575ced5c3e8378

मैंने अभी अपडेट किया है और मैं अभी भी इस मुद्दे को <ListView /> पर देख रहा हूं। क्या मुझसे कुछ गलत हो रही है? ये रहा मेरा पैकेज.जेसन:

  "dependencies": {
    "native-base": "^2.3.1",
    "react": "^16.0.0",
    "react-native": "^0.50.0-rc.1",
    "react-native-linear-gradient": "^2.3.0",
    "react-native-modal": "^4.1.0",
    "react-native-simple-store": "^1.3.0",
    "react-navigation": "^1.0.0-beta.11"
  },

मुझे लगता है कि ListView अब तक पदावनत कर दिया गया है। यह FlatList साथ बेहतर प्रयास करें और देखें कि क्या हो रहा है।

मेरा मानना ​​है कि हम इसे अभी भी 0.50.3 पर देख रहे हैं। क्या कोई और पुष्टि कर सकता है?

मैंने फ़्लैटलिस्ट पर स्विच करके इस समस्या को ठीक किया।
शुक्रवार, 17 नवंबर, 2017 को सुबह 8:39 बजे कॉलिन रामसे सूचनाएं @github.com
लिखा था:

मेरा मानना ​​है कि हम इसे अभी भी 0.50.3 पर देख रहे हैं। क्या कोई और पुष्टि कर सकता है?

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/facebook/react-native/issues/1831#issuecomment-345294840 ,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt
.

आह, हम पहले से ही _use_ FlatList कर रहे हैं।

यह अभी भी 0.50.3 के साथ एक समस्या है। removeClippedSubviews का कोई असर नहीं दिख रहा है। क्या हम कृपया इसे फिर से खोल सकते हैं?

हमारे पास अभी भी 0.50.3 में एक समस्या है। कृपया इसे फिर से खोलें।

फिर से परेशान करने के लिए खेद है, लेकिन क्या हम इसे फिर से खोल सकते हैं? यह एक ज्वलंत मुद्दा है।

नवीनतम एक्सपो रिएक्ट नेटिव एसडीके का उपयोग करके इसमें भाग लें। यह केवल TabNavigator में तीसरे ListView के साथ होता है। अगर मैं दूसरे और तीसरे को स्वैप करता हूं, तो नया तीसरा पेज प्रभावित होगा। हालांकि removeClippedSubviews ने इसे मेरे मामले में ठीक कर दिया।

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); }); ने मेरे लिए काम किया।

this.listView.scrollToEnd() का उपयोग करने से काम नहीं चला , इसलिए मुझे सूची के अंत के निर्देशांकों की मैन्युअल रूप से गणना करनी पड़ी और फिर scrollTo() जाना पड़ा

फ्लैटलिस्ट के लिए यह उसी सरणी को अपडेट करने के कारण हो सकता है। फ़्लैटलिस्ट जाँचता है कि डेटा अलग है या नहीं। तो अपरिवर्तनीय सरणियों का उपयोग करें

removeClippedSubviews={false} मेरे मामले के लिए बग को ठीक करता है।

<ListView
            data={this.state.mockData}
            renderRow={(rowData) => this.renderRow(rowData)}
            removeClippedSubviews={false}
 />

@edmengel सही है। मैं एक परियोजना पर काम कर रहा था और बिल्कुल वही बग था।

स्क्रॉल करने से पहले:

स्क्रॉल करने के बाद:

नेविगेशन के लिए React-native-router-flux@^4.0.0-beta.27 का उपयोग किया जाता है और App.js इसे लौटाता है। मेरे खोज पृष्ठ में एक सूचीदृश्य है और इसमें यह बग था। यह तीसरे टैब पर है।

<Provider store={store}>
        <View style={{flex: 1}}>
            <Router hideNavBar={true}>
                <Scene key="modal" modal>
                    {/* Tab Container */}
                    <Scene key="tabbar" tabs={true} tabBarPosition="bottom" tabBarStyle={{borderTopColor:'black', borderTopWidth:1,backgroundColor:'white'}}>
                      {/*Tabs */}
                        <Scene key="NewPage" component={NewPage} title="NewPage" icon={TabIcon}  hideNavBar={true} />
                        <Scene key="NewPage2" component={NewPage2} title="Newpage2" icon={TabIcon}  hideNavBar={true} />
                        <Scene key="SearchPage" component={SearchPage} title="Search"  hideNavBar={true} />
                    </Scene>
                </Scene>
            </Router>
        </View>
</Provider>

जब मैंने तीसरे टैब से दूसरे टैब में खोज पृष्ठ (जिसमें एक सूचीदृश्य होता है) को बदल दिया, तो सूचीदृश्य ने ठीक काम किया।

इसके लिए एक वर्किंग हैक मिला।

render() {
       setTimeout(() => {
            this.sectionList && this.sectionList.recordInteraction(); 
        }, 50);
        return (
            <SectionList ref={(view) => { this.sectionList = view }} />
        )
}

<Flatlist style={{ flex: 1 }}/>
यह ट्रिक मेरे काम आई।

0.55.4 पर ScrollView और ListView दोनों के साथ एक ही समस्या। removeClippedSubviews={false} जोड़ना काम करता है।

दुर्भाग्य से, हमारे मामले में, यह एक विकल्प नहीं है, क्योंकि यह एंड्रॉइड पर लापता छवियों से बचने के लिए आवश्यक है https://github.com/facebook/react-native/issues/13600#issuecomment -315629140

रेंडर पर आगे और पीछे स्क्रॉल करना केवल नेविगेशन के बाद होता है, इसलिए ऐसा लगता है कि यह एक प्रारंभिक रिक्त स्क्रीन पर संक्रमण कर रहा है।

दृश्य को फ्लेक्स करने से भी कोई मदद नहीं मिली।

कोई अन्य सुझाव?

मैंने पाया कि यह केवल कुछ स्क्रॉल स्थिति के बाद ही होता है ...
https://streamable.com/l5arv

दृश्य का निरीक्षण करने के लिए chrome-devtools का उपयोग करके मैं देख सकता हूं कि सभी सबव्यू क्लिप किए गए हैं।

अभी भी अटका हुआ है, @hramos कृपया फिर से खोलें।

अभी भी इस तरह के एक साधारण कार्य में कोई समस्या है? यही कारण है कि हम रिएक्ट नेटिव से वापस सीधे नेटिव कोड में चले गए।

अगर यह इतना आसान है, तो कृपया इसे ठीक करने के लिए एक हाथ दें @petersuwara

यह मुद्दा कुछ समय के लिए बंद कर दिया गया है। यदि यह आपको प्रभावित कर रहा है, तो _कृपया एक नया मुद्दा खोलें_ और जितना संभव हो उतना विवरण प्रदान करें। मैं इस मुद्दे को लॉक कर रहा हूं क्योंकि यहां बताई गई मूल समस्या को ठीक कर दिया गया था, और यह स्पष्ट नहीं है कि प्रत्येक व्यक्ति जिसने बाद में टिप्पणी की है, ठीक उसी समस्या का सामना कर रहा है।

हम Facebook पर FlatList _extensively_ का उपयोग करते हैं, और इस प्रकार की कोई शिकायत आंतरिक रूप से सामने नहीं आई है। यह संभव हो सकता है कि इस प्रकार की समस्या किसी विशेष नेविगेशन लाइब्रेरी के साथ होती है, उदाहरण के लिए। अपनी समस्या के बारे में अधिक जानकारी के साथ एक नया मुद्दा खोलना, रिप्रो के चरणों की स्पष्ट सूची के साथ, या आदर्श रूप से एक छोटी परियोजना, बहुत मददगार होगी।