+1
Столкновение с точно такой же проблемой. Работал с 0,5, но сломался с 0,6.

Это должно быть исправлено в 0.7

У меня была такая же проблема.

cloneWithRows отлично работает. но cloneWithRowsandSections - нет.

Вы видите, что cloneWithRowsandSections не работает с 0.7?

Кроме того, вы можете попробовать установить для initialListSize большее число - это может помочь в качестве обходного пути, если что-то не исправлено в версии 0.7 для вас.

Больше 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 работает для вас, yamill? Не для меня в 0.8.0.

@coderdave на самом деле cloneWithRows у меня тоже не работает. виноват.

@sahrens @ide @michalraska мой scrollY prop не обновлялся. Я в основном пытался передать смещение прокрутки моему компоненту, например:

    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 для меня, я сейчас сталкиваюсь с таким поведением при использовании навигатора. Я использую 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. У моего приложения была эта проблема с ранней версии react-native. Все работает должным образом, если я перемещаю 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 iphone 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 с использованием cloneWithRows в источнике данных. Список отображает элементы только при прокрутке.

Я видел ту же проблему в версии 0.17, но отключение removeClippedSubviews похоже, устранило ее.

+1
Я видел ту же проблему в версии 0.17, но отключение removeClippedSubviews, похоже, устранило ее.

Для меня это все еще происходит в 0.17 с removeClippedSubviews или без него. Я заметил, что моя проблема может быть связана с вручную заданным contentOffset и initialListSize . Если смещение превышает высоту элементов, которые будут отображаться для initialListSize , требуемые элементы не будут отображаться до тех пор, пока пользователь не выполнит прокрутку.

Также, похоже, проблема со списками, в которых установлено значение flexDirection: 'row' . Когда я удаляю это свойство, все элементы отображаются. Если он установлен, список изначально отображает только два элемента.

Для проблемы removeClippedSubviews при использовании навигатора.
Возможно, вы захотите проверить https://github.com/machard/react-native-advanced-navigation, где проблема не возникает (возможно, потому, что рендеринг задерживается после того, как представление действительно на экране)

Также существует проблема с flexDirection: 'row' и flexWrap: 'wrap' установленными в свойстве contentContainerStyle . Для меня работает обходной путь - установить pageSize .

версия для реакции: 0.19.0

спасибо @jittuu установка опоры pageSize сделала это и для меня!

установка pageSize на что?

@gre это зависит от вашего макета. Если ваши представления организованы в строки, pageSize должен быть кратным количеству элементов в строке. Вы можете поэкспериментировать с точным значением, чтобы увидеть, как оно влияет на производительность.

Вы также должны установить initialListSize достаточно большим, чтобы заполнить весь экран.

Вы можете найти объяснение в этом коммите полезным: https://github.com/facebook/react-native/commit/e7005f7f5429422b6f2e9c2aa29c9d57bda7b77a

@jittuu У меня это сработало; У меня также возникла ошибка при использовании flexWrap .

спасибо @jittuu установите pageSize со значением 2, я тоже решил проблему !!

по-прежнему возникает проблема при прокрутке в списке, навигации по приложению и возврате назад.
pageSize не помогло (пробовал разные значения от 1 до 60).

@gre , вы устанавливаете достаточно большой initialListSize? Есть ли репо, которое мы можем просмотреть?

@jaygarcia @nicklockwood У меня есть демонстрация для воспроизведения этой ошибки, адрес репо: ListNotRender

шаг:

1. откройте приложение.
2. щелкните элемент панели вкладок «# 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 по-прежнему создает для меня ошибку.

Немного исследуя это, мне интересно, обновляется ли

Потому что на самом деле ошибку легко воспроизвести для меня, если я прокручиваю вид, выполняю навигацию, когда он все еще прокручивается с «гравитацией» , немного подожду и щелкну обратно. Полноэкранный режим будет белым, пока я снова не прокручу.
Но это практически единственный сценарий, когда со мной случается эта ошибка. Это ~ тот же сценарий воспроизведения для всех, или ошибка шире, чем это?

Этот сценарий не так уж и далек от @janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment -22799032.

Трудно понять причину этой ошибки, но вот мои 2 цента:

Похоже, что во время фона строки становятся белыми. Когда вы снова делаете прокрутку видимой _ (например, назад) _, они все еще белые, и они не обновляются _ (потому что у них нет причин для обновления, они кэшируются) _ до тех пор, пока не произойдет новая прокрутка.

Исправит ли он ошибку, если ScrollView будет отображать своих дочерних элементов ( updateClippedSubviews ?), Только если он все еще виден? (если строки не отображаются в фоновом режиме, они больше никогда не будут отображаться белыми)

@javache 1fcd73f может исправить случай ListView с одной или двумя строками, которые не заполнены полностью. в этом случае даже прокрутка ListView не может повторно отобразить строку списка.

Я нашел простой способ воспроизвести ошибку:

1. Показать ListView с помощью removeClippedSubViews = true;
2. Коснитесь строки, чтобы перейти на следующую страницу;
3. Повернуть ориентацию экрана на 90;
4. Повернуть экран назад;
5. Вернуться к экрану ListView;

ListView будет пустым, со строками больше экрана, прокрутка ListView будет повторно отображаться, со строками меньше экрана, даже прокрутка ListView не может повторно показать что-либо. с прокруткой 1fcd73f ListView может повторно показать :)

1. По-прежнему наблюдается эта проблема с версии 0.26.3
2. В моем проекте, отличном от RN, я увидел проблему в родном Android.

Мы выбрали решение: выполнить scrollTo сдвиг на 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 со строками высотой 80pt. Я вывел формулу, которая поможет вам установить точный правильный 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

@gnestor @nihgwu Я почти уверен, что ошибка возникла не недавно. Эта проблема возникла год назад, и я лично сталкивался с ней, начиная с версии RN 0.13, и всегда использовал обходной путь, чтобы «выжить» с ListView. неиспользование removeClippedSubviews приводит к замедлению работы большого списка.
Возможно, были попытки исправить это или, по крайней мере, уменьшить количество случаев появления ошибки, но это все равно происходит примерно так, как было сообщено в этом первоначальном сообщении о проблеме.

@gre, но я все еще думаю, что # 8607 был введен в 0.29, действительно сложно переходить в пустой вид, я просто отменяю изменение https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7, и все работает отлично, как до без выключения removeClippedSubviews

Установите initialListSize на правильное значение и установите removeClippedSubviews на false, решите мою проблему

Получил эту проблему после обновления с 0.28 до 0.29.
removeClippedSubviews={false} решил проблему.
Кроме того, в моем случае я обновляю ListView height на componentDidUpdate() .
Также помогает перенос кода обновления высоты в componentDidUpdate() на setTimeout с настраиваемым тайм-аутом.

Я тоже испытал это, но это было в одном ListView, который был заполнен локальными данными. Я также видел это только на iOS и после обновления до 0.29. Рассматриваемый ListView использует this.state.dataSource.cloneWithRowsAndSections а componentDidMount - это когда я его загружаю.

Итак, removeClippedSubviews={false} обратился к этому.

Установка removeClippedSubviews в моем компоненте ListView тоже сработала. У меня возникла эта проблема только со схемой Release на 0.29 при использовании компонента по умолчанию Navigator .

У меня такая же проблема, я установил flexDirection: 'row' и flexWrap: 'wrap', я использую RN 0.29.2. В других списках (где я не установил flexDirection: 'row') у меня нет этой проблемы.

Быстрое исправление, как говорили другие плакаты, - это установить правильные initialListSize и pageSize, но я считаю, что это сделает приложение менее отзывчивым, например, если у вас есть некоторые фильтры, которые будут отображать только части списка элементов, которые у вас есть внутри списка. , нажатие между фильтрами будет медленным, потому что просмотр списка пытается повторно визуализировать всю видимую область.

В других списках я решил это, установив 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 .

Действительно огромная ошибка. Я тоже с этим встречался.

Убедитесь, что все одобряют его в Product Pains. Он уже довольно высоко, но еще не настолько, чтобы попасть в чей-то почтовый ящик :-( Вот ссылка

На данный момент я бы сказал, что это, вероятно, та же проблема, что и # 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',

в стиле списка.

initialListSize={100}
исправил это для меня

@majak вы планируете создать пиар с этим патчем?

@janmonschke ага ! Следите за обновлениями по связанной проблеме.

Была эта проблема на 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}

прошло более 1 года, этот вопрос все еще открыт ??

все еще существует на версии 0.39. set removeClippedSubviews = {false} работает.

«removeClippedSubviews = {false}» кажется не лучшим решением, у меня есть новое решение, и оно мне подходит. Paltform iOS. RCTView.m файл

я должен создать пиар?

Кто-нибудь тестировал на RN0.40, я больше не сталкивался с этой проблемой после обновления до RN0.40

Эта проблема существует.
1. Покажите ListView с помощью removeClippedSubViews = true;
2, коснитесь строки, чтобы перейти на следующую страницу;
3, поверните ориентацию экрана на 90;
4, возврат к экрану ListView;

ListView будет пустым, со строками больше, чем на экране, прокрутите ListView, чтобы повторно отобразить

@endpress Я выполнил ваши шаги, но все еще не могу воспроизвести его, используя RN0.41RC0

Есть эта проблема в 0.38.

Мое обходное решение - изменение paddingTop ListView между 0 и 1, поэтому ListView будет обновляться каждый раз.

Вы можете попробовать изменить backgroundColor, border и т. Д. Сообщите мне, работают ли другие свойства.

@nihgwu все еще существует на 0.40.0

Это проблема

@endpress изменение (https://github.com/facebook/react-native/issues/1831#issuecomment-270552011) работает в моем случае, и это также может помочь facebook / react-native # 8607.
я знаю, что патч может быть еще далек от совершенства, но я все же предлагаю вам создать пиар.

для меня даже установка initialListSize = {0} исправляет это rn 0.40.0

@majak Есть ли что-нибудь хорошее в этой роковой проблеме?

А как насчет https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 ?

FlatList все еще является экспериментальным, поэтому нет никаких гарантий, что в нем будет меньше ошибок или он будет изменяться обратно несовместимыми способами, но вы можете попробовать его на свой страх и риск.

@sahrens @gre Можно ли построить абстрактный слой поверх FlatList, который предоставляет тот же API, что и старый ListView, чтобы наш старый код приложения мог оставаться таким же.

@sahrens FlatList реализован с помощью UITableView?

Когда FlatList стабилизируется и перестанет быть экспериментальным, мы можем создать адаптер с таким же API, как ListView, или, может быть, мы заменим реализацию ListView под капотом.

Он не использует UITableView. На самом деле он вообще не использует никакого нового нативного кода, это всего лишь JS с нашими существующими примитивами нативного / фреймворка - вы можете посмотреть реализацию здесь: https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32

@sahrens спасибо, это довольно круто и полезно.

@savanthongvanh установка начального размера на 0 приводит к отображению всех элементов в ListView при начальной загрузке. Будьте осторожны с этим, если у вас много вещей.

Также занимаемся этим рН 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.

Кроме того, способ программного запуска прокрутки 1px по-прежнему работает как для ListView / FlatList. но вам нужно вызвать его в нужном жизненном цикле (обычно, когда вы возвращаетесь на экран).

@gre : у вас есть приложение для воспроизведения проблемы с FlatList? Я хотел бы исправить это как можно скорее!

@gre , у вас есть пример кода для этого? И вы имеете в виду componentWillMount для этого компонента, охватывающего ListView?

@ericvicenti - похоже, для этого требуется еще несколько фрагментов кода от RN. Я волновался, что он будет заимствовать кусочки и детали из других источников. Я могу вытащить его. Может быть, бросить его в репо для использования другими людьми - это разрешено?

@sahrens извините, это в приложении моей компании, но, возможно, я могу попытаться создать пустой пример, чтобы воспроизвести его!

@natdm немного выше в комментарии: https://github.com/facebook/react-native/issues/1831#issuecomment -231069668 - это основная идея, я более или менее отклонился от этого с системой, которая будет чередовать -1px и 1px, чтобы визуально не накапливать прокрутку с течением времени XD huge hack

У меня проблема с SectionList - пусто при первоначальном рендеринге, пока я не прокручу. @sahrens есть ли исправление?

@smkhalsa у вас есть четкое репро? Установка removeClippedSubviews = {false}

@sahrens Похоже, установка removeClippedSubviews = {false} исправляет эту проблему. Без этого я получаю пустой экран каждый раз, когда перехожу к этому конкретному представлению.

Я постараюсь выделить проблему в новом репо и опубликовать, если смогу.

то же самое для меня (removeClippedSubviews определенно является триггером для ошибки). у нас просто было простое воспроизведение в нашем приложении, у которого есть списки внутри response-native-tab-view. Однако я не знаю, воспроизведет ли это более простой пример.

см. 2 последних абзаца моего ответа здесь https://github.com/facebook/react-native/issues/1831#issuecomment -228775913

Я думаю, что это может быть что-то вроде этого (просто гипотеза):

(1) список отображается на фоновой вкладке, поскольку они находятся «вне ограничивающей рамки». RemoveClippedSubviews предполагает, что их здесь нет, и ничего не отображает (белый)
(2) когда вкладка переходит в фокус, и поскольку на этой вкладке, вероятно, используется что-то вроде <StaticContainer> , ничего не обновляется, она все еще белая
(3) как только пользователь выполнит «прокрутку», вы обновите логику removeClippedSubviews, которая теперь определяет видимые ячейки списка и обновляет их.

Спасибо за ведущую @gre

все еще существует на RN 0.41.2, android в порядке, только ios10, установка removeClippedSubviews = {false} может решить эту проблему. Мой listView маленький, поэтому это не большая проблема. 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} исправила это

эта проблема существует в response-native-maps 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).
Когда вы переходите на вкладку, она выглядит пустой. Список отображается только при небольшой прокрутке.

Единственная вкладка, где этого не происходит, находится в initialRouteName TabNavigator.

Как уже упоминалось, установка lazy: true на. TabNavigator решает эту проблему.

такая же проблема здесь, исправлена ​​с помощью removeClippedSubViews
как описано в повторяющейся проблеме https://github.com/facebook/react-native/issues/14069
Я создал репо, чтобы воспроизвести проблему https://github.com/jcharlet/react_native_listview_bug, если это может помочь.

Также этой проблемы не возникает при использовании response-native-router-flux вместо response-navigation для того же варианта использования.

Некоторая проблема с реактивной навигацией в TabNavigator. removeClippedSubViews = {false} не помогает.

У меня такая же проблема. Использование реакции-навигации с TabNavigator и StackNavigator в качестве дочернего элемента на рассматриваемой вкладке и простой ListView. RN 0.44 / Expo 17, и ни removeClippedSubviews, ни lazy мне не помогли: - /

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

Обновление до
{
"react-native": "0.44.2",
"react-navigation": "1.0.0-beta.11"
}
работал у меня, lazy = true, похоже, не требуется для StackNavigator

{
"react-native": "0.44.2",
"react-navigation": "1.0.0-beta.11"
}
ленивый = правда
removeClippedSubViews = {ложь}
не работает

Это действительно интересно, я бы хотел посмотреть, когда эта двухлетняя ошибка будет окончательно закрыта.

Я обновился до react-native 0.44.2, react-navigation 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 и должна оставаться открытой.

Просто для общих знаний сообщества.

Я столкнулся с этой проблемой в своем сценарии, где я использую Nested ListView, то есть ListView внутри строки ListView. Мое решение было исправлено путем применения removeClippedSubviews={false} к вложенному ListView.

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 года, 15:30 +1000, Ариэль Фалдуто [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 при каждом рендере

Метод рендеринга

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, который использует react-native 0.44, я думаю, новая версия react-native (0.45 ) есть улучшения в FlatList .

кстати, почему стили создаются при каждом рендере? в этом случае рендеринг со стилями flex (в компоненте Feed ) выполняется только один раз:

1. App рендер
2. Feed рендер
3. Затем несколько FeedRow render

Очень похоже на то, что @lprhodes рассказал мне о loadFeed на каждом рендере, я понимаю, что рендеринг 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? Столкнувшись с этим с помощью response 0.44.0 с использованием react-native-tab-vew , не совсем ясно, что основная команда рекомендует в настоящее время.

@sjmueller разве @sahrens не сказал, что это уже исправлено в мастере?

@hramos Я только что снова просмотрел всю эту @sahrens упоминал, что невидимый FlatList исправлен на мастере. Я также не видел фиксации / PR, ссылающейся на эту проблему, и, наконец, не видел рекомендованного обходного пути для решения проблемы.

Я вижу, что @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 года в 15:44 Питер Сувара [email protected] написал:

РАБОТАЙТЕ ВСЕГО
Работает на любом оборудовании / симуляторах.

'' 'componentDidMount () {
requestAnimationFrame (() => {
// НАЗНАЧЕНИЕ ДЛЯ ПЕРЕЗАГРУЗКИ ДАННЫХ
this.refs._list.scrollTo ({x: 1, y: 0, animated: false})
});
} '' '

'' '
ref = "_ list"
dataSource = {this.state.dataSource}
renderRow = {(данные, sectionId, rowId) =>}
renderSeparator = {(sectionId, rowId) =>}
removeClippedSubViews = {ложь}
initialListSize = {SortedBrandList.count}
/> '' '

-
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub или отключите чат.

Я решил эту проблему, по крайней мере, на симуляторе, с помощью:

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

Я предполагаю, что процедура, которая управляет clippedSubviews, не проверяет границы должным образом, когда 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

        })
}

А во время небольшой задержки всегда можно показать экран загрузки. Он такой короткий, что его даже не видно.

Я обнаружил, что метод

Это происходит в компонентах, которые уже смонтированы, например, в экранах, назначенных вкладкам в реакции-навигации, но в настоящее время выбраны в большей степени, поэтому я не уверен, как поправка в componentWillMount может это исправить.

Мой PR, приведенный выше, похоже, устранил проблему, но мне не удалось объединить его. Хотел бы кто-нибудь еще присоединиться к этому PR?

@MattFoley Будет ли это объединено. Я использую ваш код сейчас. И это действительно решило мою проблему.

Настройка TabNavigator для react-navigation на lazy: true также работает ... Но было бы здорово, если бы это было исправлено с помощью react-native .

Если вы используете SectionList или Flatlist, просто используйте ref = {(ref) => this.sectionList = ref}
и в вашем коде this.sectionList.recordInteraction () - должен отображать ваше представление

Предлагаемое исправление @MattFoley было объединено и теперь является частью выпуска 0.50: https://github.com/facebook/react-native/commit/03ae65bc25185fe6d7f62e66f5575ced5c3e8378

Я только что обновил и все еще вижу эту проблему на <ListView /> . Я делаю что-то неправильно? Вот мой package.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, Колин Рамзи, [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
.

Ах, мы уже _используем_ FlatList.

Это все еще проблема с 0.50.3. removeClippedSubviews, похоже, не имеет никакого эффекта. Мы можем снова открыть это, пожалуйста?

У нас все еще есть проблема с 0.50.3. Пожалуйста, откройте это снова.

Извините за беспокойство, но мы можем снова открыть это, пожалуйста? Это насущный вопрос.

Разберитесь с этим, используя последнюю версию Expo React Native SDK. Это происходит только с третьим ListView в TabNavigator. Если я поменяю местами 2-ю и 3-ю, это повлияет на новую 3-ю страницу. 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>

Когда я изменил страницу поиска (которая содержит список) с третьей вкладки на вторую вкладку, просмотр списка работал нормально.

Нашел для этого рабочий хак.

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 обратно к прямому Native коду.

Если это так просто, пожалуйста, протяните руку, чтобы исправить это @petersuwara

Этот вопрос был закрыт на некоторое время. Если вас это беспокоит, _пожалуйста, откройте новую проблему_ и предоставьте как можно больше подробностей. Я блокирую эту проблему, поскольку исходная проблема, о которой здесь сообщалось, была исправлена, и неясно, что каждый человек, который прокомментировал впоследствии, сталкивается с одной и той же проблемой.

Мы используем FlatList _extensively_ в Facebook, и внутри компании не поступало никаких жалоб такого рода. Возможно, проблема такого типа возникает, например, с определенной библиотекой навигации. Открытие нового выпуска с дополнительной информацией о вашей проблеме, с четким списком шагов для воспроизведения или, в идеале, небольшого проекта, будет большим подспорьем.