+1
مواجهة نفس المشكلة بالضبط. عملت بـ 0.5 لكن كسر بـ 0.6.

يجب إصلاح هذا في 0.7

كنت أواجه نفس المشكلة بالضبط.

cloneWithRows يعمل بشكل جيد. لكن cloneWithRowsandSections لا يفعل ذلك.

هل ترى cloneWithRowsandSections لا يعمل مع 0.7؟

أيضًا ، قد ترغب في محاولة تعيين initialListSize إلى رقم أكبر - قد يساعد ذلك كحل بديل إذا لم يتم إصلاح الأشياء في 0.7 بالنسبة لك.

Bigger initialListSize لا تساعد و 0.7 لم أحاول بعد بسبب تبعية البائعين. لأنه من الممكن أن أعلمك بحوالي 0.7 إذا لم يكن شخص ما أسرع :)

وجود نفس المشكلة مع cloneWithRows في الإصدار 0.6 ، كان يعمل في 0.5.

لم تجربها في 0.7. سأعطيها محاولة. أعلم أنني حاولت أيضًا تعيين initialListSize إلى رقم أعلى سابقًا ولم أساعد.

عملت في 0.7

أيضا لا تعمل في 0.7.1

تواجه نفس المشكلة مع cloneWithRows في الإصدار 0.7.1

بالنسبة لي يعمل بشكل جيد في 0.7.1.

لا يعمل في 0.8.0.

لا تزال تستخدم cloneWithRows بدلاً من cloneWithRowsAndSections

cloneWithRows يعمل معك ياميل؟ لا يناسبني في 0.8.0.

coderdave في الواقع cloneWithRows لا يعمل معي أيضًا. غلطتي.

sahrensidemichalraska لم يتم تحديث خاصية 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-rc.

فيما يلي مثالان يمكنهما إعادة إظهار المشكلة.

الصفوف: https://rnplay.org/apps/d3DM6A
صفوف + أقسام: https://rnplay.org/apps/xnyaYw

كان الحل المؤقت الذي توصلت إليه هو التمرير في ListView 1pt عند تركيبه.

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

يمكنك إلغاء تعليق هذا القسم داخل المثال الموجود على موقع rnplay.org للاختبار.

سؤال سخيف. هل يمكن أن يكون لهذا علاقة باستخدام NavigatorIOS؟ لقد واجهت بعض المشكلات مع العرض ، والحشو ، وما إلى ذلك ، كل ذلك عندما تم عرض طريقة عرض القائمة كطفل من NavigatorIOS.

jaygarcia لا أعتقد ذلك لأن المثال لا يستخدم NavigatorIOS. أيضًا ، في مشروعي الخاص ، أستخدم Navigator بدلاً من NavigatorIOS.

إجراء 1+ بالنسبة لي ، أواجه حاليًا هذا السلوك عند استخدام Navigator. أنا في 0.11 وأستخدم cloneWithRows.

كحل بديل ، اضطررت إلى استخدام حل christopherdro ، لكنني سأحتاج إلى التمرير بشكل كافٍ لعرض العناصر الخاصة بي (فهي كبيرة).

ومن المثير للاهتمام ، أن الحل مرتبط بالحل البديل لهذا الخطأ: https://github.com/facebook/react-native/issues/1878 لذا فإن الكود النهائي الخاص بي هو:

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

حسنًا ، باستخدام الكود المذكور أعلاه ، حصلت على بعض الأخطاء الغريبة في ScrollViews المتداخلة: بعد التثبيت ، تم تشغيل حدث onScroll الذي أعاد وضع إزاحة التمرير الأولية الخاصة بي على تلك المشاهدات.

لا يزال خطأ في 0.12.0. إليك التسلسل الهرمي للعرض:

نفس المشكلات مثل Sidnicious على 0.11.0. واجه تطبيقي هذه المشكلة منذ إصدار مبكر من رد الفعل الأصلي. كل شيء يعمل كما هو متوقع إذا قمت بنقل 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 ، جربت كل الحيل ، ولم يحالفك الحظ. iOS 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. هل وضع أي شخص هذا على الرادار على "آلام المنتج"؟ هذا الشخص أصبح مؤلمًا للغاية. : /

لقد قمت بنشر هذا على " آلام المنتج" . إذا كان لا يزال يؤثر عليك ، فلا تتردد في التصويت عليه هناك.

0.16 ، نفس المشكلة

لا تزال المشكلة قائمة في 0.17 باستخدام cloneWithRows على مصدر البيانات. تعرض القائمة العناصر فقط عندما يتم التمرير عليها.

كنت أرى هذه المشكلة نفسها في 0.17 ولكن يبدو أن تعطيل removeClippedSubviews قد أصلحها.

+1
كنت أرى هذه المشكلة نفسها في 0.17 ولكن يبدو أن تعطيل removeClippedSubviews قد أصلحها.

بالنسبة لي لا يزال يحدث في 0.17 مع أو بدون removeClippedSubviews . ما لاحظته هو أن مشكلتي قد تكون متعلقة بإزاحة محتوى تم تعيينه يدويًا و initialListSize . إذا كانت الإزاحة أكبر من ارتفاع العناصر التي سيتم عرضها لـ initialListSize ، فلن يتم عرض العناصر المطلوبة حتى يقوم المستخدم بالتمرير.

يبدو أيضًا أن هناك مشكلة في القوائم التي تم تعيين flexDirection: 'row' . عندما أقوم بإزالة هذه الخاصية ، يتم عرض جميع العناصر. إذا تم تعيينه ، فإن القائمة تعرض عنصرين فقط في البداية.

لمشكلة removeClippedSubviews عند استخدام Navigator.
قد ترغب في التحقق من https://github.com/machard/react-native-advanced-navigation حيث لا تحدث المشكلة (ربما بسبب تأخر العرض إلى ما بعد أن يكون العرض بالفعل على الشاشة)

هناك أيضًا مشكلة في تعيين flexDirection: 'row' و flexWrap: 'wrap' في خاصية contentContainerStyle . الحل الذي يناسبني هو تعيين pageSize .

النسخة الأصلية: 0.19.0

شكرا jittuu تعيين pageSize الدعامة فعلت ذلك بالنسبة لي أيضا!

صفحة الضبط الحجم على ماذا؟

gre يعتمد ذلك على التخطيط الخاص بك. إذا تم ترتيب طرق العرض الخاصة بك في صفوف ، فيجب أن يكون حجم الصفحة مضاعفًا للعناصر في كل صف. يمكنك تجربة القيمة الدقيقة لترى كيف تؤثر على الأداء.

يجب عليك أيضًا تعيين initialListSize كبيرة بما يكفي لملء الشاشة بأكملها.

قد تجد الشرح في هذا الالتزام مفيدًا: https://github.com/facebook/react-native/commit/e7005f7f5429422b6f2e9c2aa29c9d57bda7b77a

jittuu لقد flexWrap .

شكرا jittuu تعيين

لا تزال تواجه المشكلة عند القيام بالتمرير في عرض القائمة ، والتنقل في التطبيق والعودة.
pageSize لم يساعد (لقد جربت قيمة مختلفة من 1 إلى 60).

gre هل تقوم بتعيين initialListSize كبيرة بما يكفي؟ هل هناك ريبو يمكننا مشاهدته؟

jaygarcianicklockwood لدي عرض لإعادة إنتاج هذا الخطأ، رابط الريبو: ListNotRender

خطوة:

1. افتح التطبيق.
2. انقر فوق عنصر tabbar "# 1".
3. عنصر القائمة لا يتم عرضه حتى أي تمرير ..

أنا متأكد من أن هذا الخطأ متعلق بخاصية removeClippedSubviews الخاصة بـ ListView ، ولا يحدث الخطأ إلا عند تعيينه على "true".

لا يزال هذا يحدث لنا على RN 0.26.0. نفس الوضع هنا:

• removeClippedSubviews={true}
• يتم عرض ListView خارج الشاشة
• عند الانتقال إلى تلك الشاشة ، يتم إفلات عرض القائمة حتى يتفاعل معها المستخدم

cc javache

أعتقد أن هذا تم إصلاحه من خلال https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e

javache لقد أضفت هذا السطر يدويًا محليًا ولم يحل المشكلة.

قمت أيضًا بتطبيق هذا فوقه https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 ولكن لم ينجح أيضًا. ؛)

https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e الالتزام أعلى RN 0.28 لا يزال يخلق الخطأ بالنسبة لي أيضًا.

عند التحقيق قليلاً في هذا الأمر ، أتساءل عما إذا كان ListView لا يزال قيد التحديث في الخلفية (على سبيل المثال أثناء تحديث التمرير) حتى عندما لم يعد مرئيًا؟

لأنه ، في الواقع ، يمكن تكرار الخطأ بسهولة بالنسبة لي إذا قمت بالتمرير على العرض ، وقمت بالتنقل عندما لا يزال يتم تمريره باستخدام "الجاذبية" ، وانتظر قليلاً ثم انقر مرة أخرى. ستكون الشاشة الكاملة بيضاء حتى أقوم بالتمرير مرة أخرى.
لكن هذا هو السيناريو الوحيد عندما يحدث لي هذا الخطأ. هل هذا هو نفس سيناريو repro للجميع ، أم أن الخطأ أوسع من هذا؟

هذا السيناريو ليس بعيدًا عن janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment -22799032.

من الصعب معرفة سبب هذا الخطأ ، ولكن هنا سنتان:

يبدو أن الصفوف يتم عرضها _أبيض_ أثناء الخلفية. عند جعل عرض التمرير مرئيًا مرة أخرى _ (على سبيل المثال ، الرجوع) _ ، فإنها لا تزال بيضاء ، ولا يتم تحديثها _ (نظرًا لعدم وجود سبب لتحديثها ، يتم تخزينها مؤقتًا) _ حتى يحدث تمرير جديد.

هل سيصلح الخطأ إذا كان ScrollView سيعرض عناصره الفرعية ( updateClippedSubviews ؟) فقط إذا كان لا يزال مرئيًا؟ (إذا لم يتم عرض الصفوف أثناء الخلفية ، فلن يتم عرضها باللون الأبيض مرة أخرى)

يمكن لـ javache 1fcd73f إصلاح الحالة ListView بصف واحد أو صفين لا

أجد طريقة بسيطة لإعادة إنتاج الخطأ:

1. إظهار ListView مع removeClippedSubViews = صحيح ؛
2. لمس صف دخول الصفحة التالية ؛
3. تدوير اتجاه الشاشة 90 ؛
4. تدوير الشاشة مرة أخرى ؛
5. العودة إلى شاشة ListView ؛

سيكون ListView فارغًا ، مع وجود صفوف أكثر من شاشة ، قم بالتمرير إلى ListView سيعيد عرضه ، مع وجود صفوف أقل من شاشة ، حتى لا يمكن لـ ListView التمرير إعادة عرض أي شيء. باستخدام 1fcd73f ، يمكن لـ ListView إعادة عرض :)

1. لا تزال ترى هذه المشكلة اعتبارًا من 0.26.3
2. في مشروع غير RN الخاص بي ، رأيت المشكلة في Android الأصلي.

كان الحل الذي اخترناه هو القيام بتحويل التمرير إلى 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 وعدد الصفوف التي يتم عرضها ولكنها غير متسقة. لقد اكتشفت أنه عادةً ما يتم عرضه على النحو التالي (على الرغم من أنه يعرض جميع الصفوف في بعض الأحيان):

| scrollRenderAheadDistance | عدد الصفوف المعروضة |
| --- | --- |
| 1000 | 2 |
| 1200 | 2-5 |
| 1400 | 5 |
| 1600 | 6 |
| 1800 | 7+ |

أقوم بعرض ListView بصفوف بارتفاع 80 نقطة. لقد اشتقت صيغة من المفترض أن تساعدك في تعيين scrollRenderAheadDistance المناسب تمامًا لعرض ListView الخاص بك:

scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)

ومع ذلك ، لا أفهم أهمية 680 (أو 340 * 2 ).

تحرير: يعمل هذا الحل في تصحيح الأخطاء ولكن ليس في مخطط الإصدار (لنظام iOS) ...

حسنًا ، يؤدي تعيين removeClippedSubviews إلى false إلى حل المشكلة بالنسبة لي.

لم أواجه هذا حتى الترقية من 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

gnestornihgwu أنا جدا من أن علة ليس تراجعا في الآونة الأخيرة. تم إنشاء هذه المشكلة منذ عام واحد ، وقد اختبرتها شخصيًا منذ 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 مع مهلة مخصصة.

لقد جربت هذا أيضًا ولكنه كان في ListView واحدًا تم ملؤه بالبيانات المحلية. كما أنني كنت أرى هذا فقط على نظام التشغيل iOS وبعد أن قمت بالترقية إلى 0.29. يستخدم ListView المعني this.state.dataSource.cloneWithRowsAndSections و componentDidMount عندما أقوم بتحميله.

ولذا فإن removeClippedSubviews={false} عالج هذا الأمر.

لقد نجح تعيين removeClippedSubviews على مكوّن ListView الخاص بي أيضًا. كنت أواجه هذه المشكلة فقط مع مخطط Release على 0.29 عند استخدام المكون الافتراضي Navigator .

لدي نفس المشكلة ، لقد قمت بتعيين flexDirection: 'row' و flexWrap: 'التفاف' ، أنا على RN 0.29.2. في عروض القائمة الأخرى (حيث لم أقم بتعيين flexDirection: "row") ليس لدي هذه المشكلة.

الإصلاح السريع كما قال الملصقات الأخرى هو تعيين initialListSize و pageSize المناسبين ، لكنني أعتقد أن ذلك سيجعل التطبيق أقل استجابة ، على سبيل المثال إذا كان لديك بعض المرشحات التي ستظهر فقط أجزاء من قائمة العناصر التي لديك داخل عرض القائمة ، سيكون النقر بين المرشحات بطيئًا لأن عرض القائمة يحاول عرض المنطقة المرئية بالكامل.

في listviews الأخرى ، قمت بحل هذا عن طريق تعيين initialListSize = 0 pageSize = 1. لكن لا يمكنني عرض قائمة الشبكة (flexDirection: 'row' و flexWrap: 'wrap').

أنا أضرب هذا على RN v0.31.0-rc.0.

إضافة removeClippedSubviews = يبدو أن {false} قد أصلحت المشكلة.

"removeClippedSubviews = {false}" يبدو أنه ليس حلاً جيدًا ، سيعرض كل الصفوف ولديه مشكلة في إدارة الذاكرة. هل لدى شخص ما حل أفضل باستثناء "listView. scrollTo" و "removeClippedSubviews"؟

هذه المشكلة أسوأ بكثير على iOS 10 beta مع RN 0.31 :-(

لم يساعدني removeClippedSubviews على Android ، واضطررت إلى الانتقال من ListView إلى ScrollView بدلاً من ذلك.

حشرة ضخمة حقا. التقيت به أيضا.

تأكد من أن الجميع يؤيد ذلك على "آلام المنتج". إنه بالفعل مرتفع جدًا ، ولكنه ليس مرتفعًا بما يكفي للهبوط في صندوق بريد شخص ما حتى الآن :- ( هذا هو الرابط

في هذه المرحلة ، أود أن أقول إن هذه ربما تكون نفس المشكلة مثل # 8607. تحقق من خطتي كيفية التعامل معها.

يستمر في الوجود في 0.33.0

لا يزال موجودًا في 0.32

لقد قابلت هذا الخطأ بالأمس ، وعمل تعيين removeClippedSubviews = {false} .

+1 على 0.33

نعم ، لي ، نفس المشكلة! +1
0.33 ،
يحرر:
removeClippedSubviews = {false} ، أصلحت المشكلة لي أيضًا.

+1

هل يمكنك تجربة هذا التصحيح https://gist.github.com/majak/b0ee1fb6ca725d2cf810d2f0ab394f2e (من # 8607) وإخباري ما إذا كان يساعد في حل هذه المشكلة؟

majak شكرا لتقاسم هذا التصحيح. نحن فقط نطبقه ، والآن اختفت هذه المشكلة (RN 0.34).

majak هذا يبدو أنه يصلح لي أيضًا ، عمل جيد!

هذا يحدث على RN34 ، عندما removeClippedSubviews={true}

واجهت هذه المشكلة على React Native 0.34.
حدثت المشكلة فقط عندما كان لدي:

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

على نمط listview.

initialListSize={100}
أصلحه لي

majak هل تخطط لإنشاء

تضمين التغريدة اتبع المشكلة المرتبطة للحصول على التحديثات.

واجهت هذه المشكلة على React Native 0.36

أستطيع أن أؤكد أن هذا يحدث في 0.36

إنه يعمل بشكل مثالي في المحاكي ، في وضع التصحيح فقط ، ولكن لا يعمل أبدًا على الجهاز. القائمة لا تعمل أبدًا على جهاز ، جربت كل ما هو موصى به مما سبق ، حتى استبدلت ListView بـ ScrollView ، كل ما أراه على جهاز Android الخاص بي هو المتصفح. (حتى حاولت وضع القائمة خارج الملاح)
0.37

لا يزال بإمكاني العثور على المشكلة في 0.36 ولكن شكرًا لك على الحل!

ما زلت أراه عند 0.36.1

ما زلت أراه عند 0.36.1

موجودة في 0.31
initialListSize={1} ليحلها

واجهت هذه المشكلة على React Native 0.38

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

يعمل هذا على إصلاح المشكلة في الإصدار 0.38 ، ولا أعرف ما إذا كان يعمل في الإصدارات السابقة أيضًا.
هذا أرشفة المشكلة في الإصدار 0.38 ، لا أعرف ما إذا كان يعمل على الإصدارات القديمة

توجد هذه المشكلة في 0.36.
تعذر الحصول عليه للعمل مع removeClippedSubviews = {false} و initialListSize = {8}

مر أكثر من عام ، وما زالت هذه القضية مفتوحة ؟؟

لا يزال موجودًا على 0.39. تعيين removeClippedSubviews = {false} يعمل.

"removeClippedSubviews = {false}" يبدو أنه ليس حلاً جيدًا ، لدي حل جديد وهو يعمل بالنسبة لي. Paltform iOS. ملف RCTView.m

هل يجب علي إنشاء علاقات عامة؟

هل تم اختبار أي شخص على RN0.40 ، لم أعد أواجه هذه المشكلة بعد الترقية إلى RN0.40

هذه المشكلة موجودة.
1 ، إظهار ListView مع removeClippedSubViews = صحيح ؛
2 ، المس صفًا أدخل الصفحة التالية ؛
3 ، تدوير اتجاه الشاشة 90 ؛
4 ، العودة إلى شاشة ListView ؛

سيكون ListView فارغًا ، مع وجود صفوف أكثر من شاشة ، قم بالتمرير في ListView سيعيد عرضه

endpress لقد اتبعت خطواتك ، وما زلت لا أستطيع إعادة إنتاجها ، باستخدام RN0.41RC0

لديك هذه المشكلة في 0.38.

الحل البديل الخاص بي هو تغيير paddingTop of ListView بين 0 و 1 ، لذلك سيتم تحديث ListView في كل مرة.

يمكنك محاولة تغيير لون الخلفية ، والحدود ، وما إلى ذلك. يُرجى إعلامي إذا كانت الخصائص الأخرى تعمل.

nihgwu لا يزال موجودًا على 0.40.0

هذه هي القضية

@ قم بإلغاء التغيير (https://github.com/facebook/react-native/issues/1831#issuecomment-270552011) يعمل مع حالتي ، وقد يساعد facebook / response-native # 8607 أيضًا.
أعلم أن التصحيح قد لا يزال بعيدًا عن الكمال ، لكني ما زلت أقترح عليك إنشاء علاقات عامة.

بالنسبة لي حتى إعداد initialListSize = {0} يصلحه rn 0.40.0

majak هل هناك أخبار جيدة لهذه المشكلة القاتلة؟

ماذا عن https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 ؟

لا تزال FlatList تجريبية ، لذا لا توجد ضمانات على وجود عدد أقل من الأخطاء أو التغيير بطرق غير متوافقة مع الإصدارات السابقة ، ولكن يمكنك تجربتها على مسؤوليتك الخاصة.

sahrensgre هل من الممكن لبناء طبقة مجردة على رأس FlatList التي توفر نفس API كما يكون ListView قديمة جدا أن لدينا رمز التطبيق القديم يمكن أن تبقي نفسها.

sahrens يتم تنفيذ FlatList

بمجرد استقرار FlatList ولم يعد تجريبيًا ، فقد نصنع محولًا بواجهة برمجة تطبيقات متطابقة مثل ListView ، أو ربما سنقوم بتبديل تطبيق ListView تحت الغطاء.

لا يستخدم UITableView. إنه في الواقع لا يستخدم أي كود أصلي جديد على الإطلاق ، إنه فقط JS مع بدائلنا الأصلية / إطار العمل الحالي - يمكنك إلقاء نظرة على التنفيذ هنا: https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32

sahrens ، شكرًا لك ، إنه رائع ومفيد للغاية.

savanthongvanh تعيين الحجم الأولي على 0 له تأثير عرض جميع العناصر في ListView عند التحميل الأولي. كن حذرًا مع هذا إذا كان لديك الكثير من العناصر.

أيضا التعامل مع هذا rn 0.41.2. هل يمتلك شخص ما تطبيقًا بسيطًا لـ FlatLIst يمكنني نسخه ، وآمل حقًا في إيجاد حل قريبًا.
شكرا،
رون

تعتبر FlatList (وVirtualizedList) في وضع رئيسي إذا كنت تريد اللعب بها.

إليك طريقة بسيطة للبدء الآن مع FlatList لأي شخص يتعامل مع هذا: https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b#.xnp03gd2u

عيّن initialListSize إلى قيمة مناسبة واضبطوا removeClippedSubviews على false لحل مشكلتي

شكرًا hoperce ، مع removeClippedSubviews يعمل بالنسبة لي ، يتسبب initialListSize التمرير المتقطع

لدي RN .42 ولا أرى أي شفرات تجريبية هنا لـ FlatList ، لذلك أنا عالق حتى يمكنني الترقية (ليس لفترة قصيرة) مع هذه المشكلة.

يمكنك دائمًا نسخ رمز FlatList في تطبيقك ، حتى إذا كنت لا تستخدم أحدث إصدار من RN.

لا يزال بإمكاني إعادة إنتاج الخطأ "العرض الكامل يتحول إلى اللون الأبيض عند الرجوع" باستخدام FlatList. أنا أتساءل عما إذا كان الأمر لا يتعلق أكثر بـ ScrollView.

مشكلة التحول إلى اللون الأبيض لفترة وجيزة مختلفة تمامًا وفريدة من نوعها بالنسبة إلى FlatList. نحن نعمل على التخفيف من حدته ولكنها نتيجة صعبة لعرض الإطارات غير المتزامن. الخطأ الذي تشير إليه هذه المشكلة هو عدم ظهور أي محتوى في العرض الأولي حتى يقوم المستخدم بالتمرير ، والذي آمل أن يتم إصلاحه باستخدام FlatList.

لقد واجهت أيضًا هذه المشكلة مع ListView (و FlatList أيضًا).

اكتشفت للتو أنه يمكنني عرض القائمة بشكل صحيح عن طريق إعادة تعيين مصدر البيانات الخاص بي إلى [] في مُنشئ العرض ثم إعادة تعيينه إلى قائمة العناصر في setTimeout ()

لمعلوماتك تم تضمين عرض القائمة الخاص بي في ReactNavigation StackNavigator في TabNavigator.

أيضًا ، لا يزال الاختراق لتشغيل تمرير 1 بكسل برمجيًا يعمل مع ListView / FlatList. ولكنك تحتاج إلى الاتصال به في دورة الحياة المناسبة (عادةً عندما تعود إلى الشاشة).

gre : هل لديك تطبيق repro لمشكلة FlatList؟ أود أن أصلح ذلك في أسرع وقت ممكن!

gre ، هل لديك مثال على رمز لذلك؟ وهل تقصد في componentWillMount لهذا المكون الذي يشمل ListView؟

ericvicenti - يبدو أنه يأخذ عددًا غير قليل من التعليمات البرمجية الأخرى من RN. كنت قلقة من اقتراض أجزاء وقطع من مكان آخر. قد أخرجها. ربما رميها في الريبو ليستخدمها الآخرون - هل هذا مسموح به؟

sahrens آسف إنه

natdm أعلاه قليلاً في تعليق: https://github.com/facebook/react-native/issues/1831#issuecomment -231069668 - هذه هي الفكرة الأساسية ، لقد تباعدت أكثر أو أقل عن هذا مع نظام من شأنه بالتناوب بين -1 بكسل و 1 بكسل حتى لا تتراكم بصريًا تمريرًا بمرور الوقت XD ضخم الاختراق

أواجه هذه المشكلة مع SectionList - فارغ في العرض الأولي حتى أقوم بالتمرير. sahrens هل هناك حل في الأفق؟

smkhalsa هل لديك صورة واضحة؟ هل إعداد removeClippedSubviews = {false}

sahrens يبدو أن إعداد removeClippedSubviews = {false} يصلح هذا الأمر بالنسبة لي. بدون ذلك ، أحصل على شاشة فارغة في كل مرة أقوم فيها بالانتقال إلى هذا العرض المحدد.

سأحاول عزل المشكلة في إعادة شراء جديدة ونشرها إذا كان بإمكاني.

نفس الشيء بالنسبة لي (يعد removeClippedSubviews بالتأكيد سببًا وراء الخطأ). لقد كان لدينا للتو نسخة سهلة في تطبيقنا تحتوي على قوائم داخل عرض علامة التبويب التفاعلية الأصلية. لا أعرف مع ذلك ما إذا كان هناك مثال أبسط سيعيد بروروه.

انظر الفقرتين الأخيرتين من إجابتي هنا https://github.com/facebook/react-native/issues/1831#issuecomment -228775913

أعتقد أنه قد يكون شيئًا ما حول ذلك (مجرد فرضية):

(1) يتم عرض القائمة في علامة تبويب الخلفية ، نظرًا لأنها "خارج المربع المحيط" ، ستفترض إزالةClippedSubviews أنها ليست هنا ولن تعرض أي شيء (أبيض)
(2) عندما تنتقل علامة التبويب إلى التركيز ، ولأن علامة التبويب هذه ربما تستخدم شيئًا مثل <StaticContainer> ، فلن يتم تحديث أي شيء ، فهي لا تزال بيضاء
(3) بمجرد قيام المستخدم "بالتمرير" ، تقوم بتحديث منطق removeClippedSubviews الذي يحدد الآن خلايا القائمة مرئية ويقوم بتحديثها.

شكرا على الرصاص @ gre

لا يزال موجودًا على RN 0.41.2 ، android على ما يرام ، فقط ios10 ، قم بتعيين removeClippedSubviews = يمكن لـ {false} حل هذه المشكلة. عرض القائمة الخاص بي صغير ، لذا لا يمثل مشكلة كبيرة. قائمة listView داخل stackNavigator من 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

يمكنني أيضًا أن أؤكد أن الخطأ يحدث في RN 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 = {خطأ} لا يساعد.

نفس المشكلة بالنسبة لي. استخدام التنقل التفاعلي مع TabNavigator و StackNavigator كطفل في علامة التبويب المعنية ، و ListView العادي. RN 0.44 / Expo 17 ، ولم يساعدني الإزالة ClippedSubviews ولا الكسول: - /

ساعدني removeClippedSubviews في إصلاح إصدار IOS ، ولكن بالنسبة لنظام Android ، كان علي استخدام initialListSize

مع

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

و lazy: true في TabNavigator 's 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-beta.11"
}
عملت بالنسبة لي ، كسول = صحيح لا يبدو أنه مطلوب لـ StackNavigator

{
"تفاعل أصلي": "0.44.2"،
"رد فعل التنقل": "1.0.0-beta.11"
}
كسول = صحيح
removeClippedSubViews = {خطأ}
لا يعمل

هذا مثير للاهتمام حقًا ، أود أن أرى متى سيتم إغلاق خطأ السنتين هذا أخيرًا.

لقد قمت بالترقية إلى رد الفعل الأصلي 0.44.2 ، والملاحة التفاعلية 1.0.0-beta.11 ، وقمت بتعيين "lazy = true" على TabNavigator المعني والذي تم إصلاحه. ربما كان مجرد إعداد lazy = true سيفي بالغرض ، لكنني قمت بالتحديث بالفعل.

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.
• يبدو أنه تم التعرف على حل بديل معقول في مؤشر الترابط.

أفكار؟

أليس هذا حشرة حقيقية؟ إذا كانت الإجابة بنعم ، فلماذا يتم إغلاق القضية؟

حول الأسباب:

• يحدث أيضًا في FlatList ، لذا فهي ليست مشكلة ListView فقط.

• إزالة removeClippedSubViews يبدو وكأنه اختراق مع تكاليف الأداء ، وليس حلاً معقولاً في رأيي.

التأكيد على أن هذا لا يزال خطأ نشطًا داخل FlatList / SectionList.

هناك أيضًا بعض المشكلات المتعلقة بأداء FlatList / SectionList مما يعني أن بعض الأشخاص لا يمكنهم الانتقال بعد من ListView ، ويبدو أنه من الغريب تجاهلها بالفعل.

هل يمكن دمج شيء مثل ما نشرته أعلاه في المكونات نفسها؟

ما هي المشاكل التي واجهتك في الترحيل من ListView؟

13727

لا أرى أي تفاصيل حول المكان الذي يكون فيه ListView أفضل. لاحظ أنه يمكنك زيادة حجم النافذة أو إيقاف تشغيل الظاهرية إذا كانت هذه مشكلة بالنسبة لك ، نظرًا لأن ListView لا يفعل أيًا من ذلك.

كنت أنتظر منهم أن يردوا على الأسئلة التي طرحتها للتو قبل الانتقال منها ولكن هذا بعيدًا عن الموضوع ، لا تزال هذه المشكلة تحدث على FlatList ويجب أن تظل مفتوحة.

فقط من أجل معرفة المجتمع العامة.

لقد صادفت هذه المشكلة في السيناريو الخاص بي حيث أستخدم ListView's المتداخلة أي ListView داخل صف ListView. تم إصلاح الحل الخاص بي عن طريق تطبيق removeClippedSubviews={false} على ListView's المتداخلة.

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

من المستحيل أن يكون لديك تمرير سلس في القوائم الكبيرة باستخدام ListView / FlatList / VirtualizedList / WindowedListView (أيًا كان) في الأجهزة القديمة مثل iPad 3 / iPad Mini الذي يعمل بنظام iOS 9.x.

ملاحظة: أنا أتحدث عن القوائم المسطحة ، لا توجد صور ، فقط مكونات النص في الصفوف.

يمكن لأي شخص مشاركة مثال وظيفي مع مجموعة بيانات من 7000 سجل حيث يكون التمرير سلسًا وغير متقطع ، جرب جميع تكوينات السمات ولا حظ

متفق عليه - أقوم بمسح الخلايا البعيدة عن الرؤية أيضًا لإدارة الذاكرة. إنه لأمر مخز أن مثل هذا المكون الأساسي في العديد من التطبيقات يفتقر إلى الأداء في الكثير من حالات الاستخدام. سأتعمق في الأمر في الأسبوع المقبل أو نحو ذلك لمعرفة ما إذا كان هناك أي مكاسب كبيرة في الأداء يمكن تحقيقها.

في 10 يونيو 2017 ، الساعة 3:30 مساءً +1000 ، كتب Ariel Falduto [email protected] :

من المستحيل أن يكون لديك تمرير سلس في القوائم الكبيرة باستخدام ListView / FlatList / VirtualizedList / WindowedListView (أيًا كان) في الأجهزة القديمة مثل iPad 3 / iPad Mini الذي يعمل بنظام iOS 9.x.
ملاحظة: أنا أتحدث عن القوائم المسطحة ، لا توجد صور ، فقط مكونات النص في الصفوف.
يمكن لأي شخص مشاركة مثال وظيفي مع مجموعة بيانات من 7000 سجل حيث يكون التمرير سلسًا وغير متقطع ، جرب جميع تكوينات السمات ولا حظ
-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بكتم صوت الموضوع.

رائع lprhodes ، هنا أشارك حالة استخدام بسيطة باستخدام FlatList مع 200 سجل تقريبًا ، هذا المثال متقطع على iPad 3 مع iOS 9.

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);

أو expo uri: exp: //8v-xvw.outatime.skillcase.exp.direct : 80

شكرا !!!

يحتوي رمز المثال الخاص بك على العديد من الممارسات السيئة التي تم تناولها في الوثائق. على سبيل المثال ، تقوم بإعادة إنشاء الوظائف وإعادة ربطها باستمرار ، وهي ضريبة على وحدة المعالجة المركزية وتؤدي إلى عمليات إعادة تصيير غير ضرورية لعناصر قائمتك. يجب عليك التأكد من أن مكون ListItem الخاص بك هو PureComponent ، والتأكد من أن جميع الدعائم التي تم تمريرها إليه تظل سطحية لمنع عمليات إعادة التصيير غير الضرورية. إنها ممارسة جيدة لبقية تطبيقك أيضًا.

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

outaTiME ، لا يجب عليك أيضًا استدعاء loadFeed في كل تصيير

لا تنفذ طريقة العرضlprhodes سوى واحدة ، بالمناسبة ، أقوم بتحديث الكود باستخدام بعض أفضل الممارسات ولا يزال متقطعًا على iPad 3 مع iOS 9 (في 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 سيبطئ الأمور كثيرًا. يجب عليك أيضًا التأكد من تشغيل بنية إنتاج محسّنة ، وليس إنشاء مطور / تصحيح أخطاء ، عند تقييم الأداء. أخيرًا ، ما زلت تقوم بإنشاء كائن نمط جديد في كل عرض ، ويمكنك استخدام initialScrollPosition بدلاً من استدعاء scrollToOffset في onMount.

sahrens نعم بدون علامة debug ومع تحسين الإنتاج يعمل بشكل أفضل أقل تقطعًا ، كما قلت قبل استخدام expo 17 الذي يستخدم رد الفعل الأصلي 0.44 ، أعتقد أن الإصدار الجديد من رد الفعل الأصلي (0.45 ) يحتوي على تحسينات على FlatList .

راجع للشغل ، لماذا يتم إنشاء الأنماط في كل عرض؟ في هذه الحالة ، يتم تنفيذ العرض باستخدام أنماط flex (في مكون Feed ) مرة واحدة فقط:

1. App
2. Feed
3. ثم تقديم عدة FeedRow

مشابه جدًا لما أخبرني به Feed يتم تنفيذه مرة واحدة فقط ، فهل هذا صحيح؟

عندما تقول initialScrollPosition هل تعني initialScrollIndex أليس كذلك؟ لا يعمل مثل scrollToOffset أحتاج إلى إخفاء ListHeaderComponent (48 بكسل من الارتفاع) عند تثبيت Feed

ماذا عن هذا التحذير من وحدة التحكم؟ أنا باستخدام PureComponent لـ renderItem ، أليس كذلك؟

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 ثانية للتثبيت الأولي الخاص بك بطيء للغاية - يجب عليك حقًا التعمق في الكود الخاص بك لمعرفة ما يستغرق وقتًا طويلاً. هناك العديد من الموارد المتاحة إذا بحثت في Google عن أداء رد الفعل ، أو استفسرت في مجتمع React الأوسع للحصول على المساعدة.

ونعم ، قصدت initialScrollIndex . ستحتاج إلى تنفيذ getItemLayout حتى يعمل ، والذي يجب أن يمثل ListHeaderComponent .

رائع sahrens ، أخشى الأجهزة القديمة مثل iPad 3 أو إصدار نظام التشغيل iOS 9 ... الاختبار على الأجهزة الأحدث لا توجد مشكلات في الأداء ، أردت معرفة ما إذا كان أي شخص آخر يعاني من نفس مشكلة الأجهزة ... في فترة من الوقت سأطلب من المجتمع معرفة ما إذا كنت سأصل إلى شيء أعمق ، شكراً !!!

مرحبًا ، تم إصلاحه بإعطاء style={{ backgroundColor: 'white' }} لقائمة مسطحة

إذن hramos & sahrens ، ما هو بالضبط أفضل حل بديل لهذه المشكلة مع FlatList؟ الدخول في هذا مع رد فعل 0.44.0 باستخدام react-native-tab-vew ، وليس من الواضح حقًا ما يوصي به الفريق الأساسي في هذا الوقت.

sjmueller ألم يقل

hramos لقد راجعت للتو هذا الموضوع بأكمله مرة أخرى. ربما أكون قد أخطأت، لكنه لم يفعل أي مكان أرىsahrens أذكر أن FlatList الذهاب مرئية ثابتة على الماجستير. كما أنني لم أشاهد التزامًا / علاقات عامة تشير إلى هذه المشكلة ، وفي النهاية لا يوجد حل بديل موصى به لإصلاح المشكلة.

أرى أن yaronlevi يوصي بتعيين lazy={true} على react-native-tab-view أو TabNavigator ، لكن هذا يسبب تأخيرات سريعة حتى على iPhone 7 plus.

يقول knappdev أنه يعمل بدون lazy على 0.44.2 وما بعده ، لذلك سأحاول الترقية من 0.44.0 ومعرفة ما إذا كان لدي نجاح.

عملي حول تشغيل / إيقاف تشغيل removeClippedSubviews اعتمادًا على ما إذا كانت القائمة الثابتة قيد الاستخدام أم لا.

  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}
      />
    )
  }

removeClippedSubviews هو الآن متوقف افتراضيًا عن FlatList.

بالنسبة إلى المشكلات المتعلقة بالأجهزة البطيئة ، هل جربت تطبيق RNTester FlatListExample؟

كيف تعمل FlatListExample بالنسبة لك؟

removeClippedSubviews هو الآن متوقف افتراضيًا عن FlatList.

نعم - لهذا السبب أقوم بتشغيله عند التمرير الفعلي. إنني أتعرض لتوتر عشوائي أقل بهذه الطريقة.

ثم أقوم باستبدال الخلايا (البعيدة) التي لا يمكن رؤيتها بخلايا فارغة لتقليل الذاكرة المسموعة أكثر مما تفعله FlatList بمفردها

لذا ، أخيرًا ، لا تزال هناك طريقة لإصلاحها بدلاً من استخدام removeClippedSubviews={false} حتى لو كانت تكلف الأداء صعبًا للغاية؟

كان الإصلاح بالنسبة لي هو تعطيل تصحيح الأخطاء js عن بُعد لمحاكاة ios

يبدو أن تعيين 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}/>

المشكلة هي أنه ربما تم تركيبه بالفعل

في 24 أغسطس 2017 ، الساعة 3:44 مساءً ، كتب Peter Suwara [email protected] :

العمل حولها
يعمل على جميع الأجهزة / المحاكيات.

'' 'componentDidMount () {
requestAnimationFrame (() => {
// هاك لإعادة تحميل البيانات
this.refs._list.scrollTo ({x: 1، y: 0، animated: false})
}) ؛
} "

""
المرجع = "_ قائمة"
مصدر البيانات = {this.state.dataSource}
RenderRow = {(data، sectionId، rowId) =>}
renderSeparator = {(sectionId، rowId) =>}
removeClippedSubViews = {خطأ}
initialListSize = {SortedBrandList.count}
/> "

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بكتم صوت الموضوع.

لقد قمت بحل هذه المشكلة ، على الأقل في جهاز المحاكاة ، من خلال:

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

تخميني هنا هو أن الروتين الذي يدير العروض الفرعية المقصوصة لا يتحقق من الحدود بشكل صحيح عندما لا يكون ListView معروضًا حاليًا على الشاشة. يحدث هذا غالبًا مع أي مكون 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 : متى سيكون الإصلاح الخاص بك متاحًا للتنزيل؟

ليس محددًا فقط لـ FlatList ، يبدو أن هناك مشكلة في تحميله في ListView أيضًا.
لقد وجدت حلاً باستخدام تأخير طفيف في تعيين مصدر البيانات.

عند تحميل البيانات من مصدر بعيد في طريقة componentWillMount ، يتم تشغيل التعليمات البرمجية التالية.
يبدو أنه يعمل :

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

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

        })
}

وأثناء التأخير البسيط ، يمكنك دائمًا عرض شاشة تحميل. إنه قصير جدًا لدرجة أنه غير مرئي.

لقد وجدت طريقة nathvarun للعمل. يبدو أن هناك بعض شروط السباق بين مؤشر ترابط تركيب المكون وخيط مصدر بيانات تحديث المكون. إذا كان هذا هو الحال بالفعل ، فأنا في حيرة من أمري لماذا سيحدث هذا لأن الخيطين يجب أن يلعبوا بشكل جيد مع بعضهما البعض.

يحدث هذا في المكونات التي تم تثبيتها بالفعل على الرغم من ذلك ، مثل الشاشات المخصصة لعلامات التبويب في رد الفعل-التنقل ولكن تم تحديدها أكثر حاليًا - لذلك أنا لست متأكدًا من كيفية تعديل componentWillMount يمكن أن يصلح هذا.

يبدو أن العلاقات العامة الخاصة بي أعلاه قد أصلحت المشكلة ، لكن لم يحالفني الحظ في دمجها. هل يرغب شخص آخر في المشاركة في هذا العلاقات العامة؟

MattFoley سواء تم

تكوين TabNavigator لـ react-navigation ليكون lazy: true يعمل أيضًا ... ولكن سيكون من الرائع رؤية هذا تم إصلاحه بواسطة react-native .

إذا كنت تستخدم SectionList أو Flatlist ، فما عليك سوى استخدام المرجع = {(ref) => this.sectionList = ref}
وفي الكود الخاص بك ، يجب أن يعرض this.sectionList.recordInteraction () - طريقة العرض الخاصة بك

تم دمج الإصلاح المقترح لـ MattFoley ، وهو الآن جزء من الإصدار 0.50: https://github.com/facebook/react-native/commit/03ae65bc25185fe6d7f62e66f5575ced5c3e8378

لقد قمت للتو بالتحديث وما زلت أرى هذه المشكلة على <ListView /> . أفعل شيئا خاطئا؟ ها هي الحزمة الخاصة بي. json:

  "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. هل يمكن لأي شخص آخر أن يؤكد؟

لقد أصلحت هذه المشكلة بالتبديل إلى FlatList.
يوم الجمعة 17 نوفمبر 2017 الساعة 8:39 صباحًا Colin Ramsay [email protected]
كتب:

أعتقد أننا ما زلنا نرى هذا في 0.50.3. هل يمكن لأي شخص آخر أن يؤكد؟

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/facebook/react-native/issues/1831#issuecomment-345294840 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt
.

آه ، نحن بالفعل _ using_ FlatList.

لا تزال هذه مشكلة مع 0.50.3. removeClippedSubviews لا يبدو أن لها أي تأثير. هل يمكننا إعادة فتح هذا من فضلك؟

لا يزال لدينا مشكلة في 0.50.3. يرجى إعادة فتح هذه.

آسف على الإزعاج مرة أخرى ، ولكن هل يمكننا إعادة فتح هذا من فضلك؟ هذه قضية ملحة.

ركض في هذا باستخدام أحدث Expo React Native SDK. يحدث فقط لثالث ListView في TabNavigator. إذا قمت بتبديل الصفحتين الثانية والثالثة ، فستتأثر الصفحة الثالثة الجديدة. removeClippedSubviews لم يصلحه في حالتي بالرغم من ذلك.

عمل لي requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); }); .

استخدام this.listView.scrollToEnd() لم ينجح ، لذلك اضطررت إلى حساب إحداثيات نهاية القائمة يدويًا لتمريرها إلى scrollTo()

بالنسبة إلى القائمة المسطحة ، قد يكون سبب ذلك هو تحديث نفس المصفوفة. يتحقق FlatList مما إذا كانت البيانات مختلفة. لذا استفد من المصفوفات الثابتة

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>

عندما قمت بتغيير صفحة البحث (التي تحتوي على عرض قائمة) من علامة التبويب الثالثة إلى علامة التبويب الثانية ، عملت listview بشكل جيد.

وجدت هاك عمل لهذا الغرض.

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} يعمل.

لسوء الحظ ، في حالتنا ، هذا ليس خيارًا ، لأنه مطلوب لتجنب فقدان الصور على Android https://github.com/facebook/react-native/issues/13600#issuecomment -315629140

لا يحدث التمرير للخلف وللأمام إلا بعد التنقل ، لذا يبدو أنه الانتقال إلى شاشة فارغة في البداية.

لم يساعد ثني العرض أيضًا.

أي اقتراحات أخرى؟

لقد وجدت أنه يحدث فقط بعد موضع تمرير معين ...
https://streamable.com/l5arv

باستخدام chrome-devtools لفحص العرض يمكنني رؤية أن جميع العروض الفرعية مقطوعة.

لا يزال عالقًا ، يرجى إعادة فتح hramos .

هل ما زلت تواجه مشكلة مع هذه الوظيفة البسيطة؟ هذا هو السبب في أننا انتقلنا بعيدًا عن React Native إلى الكود الأصلي المباشر.

إذا كان الأمر بهذه البساطة ، فالرجاء مد يد العون لإصلاحهpetersuwara

تم إغلاق هذه القضية لفترة من الوقت. إذا كان هذا يؤثر عليك ، الرجاء فتح مشكلة جديدة وتقديم أكبر قدر ممكن من التفاصيل. أقفل هذه المشكلة حيث تم إصلاح المشكلة الأصلية التي تم الإبلاغ عنها هنا ، وليس من الواضح أن كل شخص علق بعد ذلك يواجه نفس المشكلة بالضبط.

نحن نستخدم FlatList _ بشكل مكثف_ في Facebook ، ولم تظهر أي شكوى من هذا النوع داخليًا. قد يكون من الممكن حدوث هذا النوع من المشكلات مع مكتبة تنقل معينة ، على سبيل المثال. إن فتح مشكلة جديدة بمزيد من المعلومات حول مشكلتك ، بقائمة واضحة من الخطوات اللازمة للإصلاح ، أو من الناحية المثالية مشروع صغير ، سيكون مفيدًا للغاية.