+1
Encontrando exatamente o mesmo problema. Trabalhou com 0,5 mas quebrou com 0,6.

Isso deve ser corrigido em 0,7

Eu estava tendo exatamente o mesmo problema.

cloneWithRows funciona bem. mas cloneWithRowsandSections não.

Você está vendo cloneWithRowsandSections não funcionando com 0.7?

Além disso, você pode querer tentar definir initialListSize para um número maior - isso pode ajudar como uma solução alternativa se as coisas não forem corrigidas em 0,7 para você.

Bigger initialListSize não ajuda e 0.7 ainda não tentei por causa da dependência de fornecedores. Como será possível, eu avisarei sobre 0.7 se alguém não for mais rápido :)

Tendo o mesmo problema com cloneWithRows na versão 0.6, estava funcionando na 0.5.

Ainda não tentei em 0.7. Vou tentar. Eu sei que também tentei definir o initialListSize para um número maior anteriormente e não ajudou.

trabalhou em 0,7

Também não funciona no 0.7.1

Tendo o mesmo problema com cloneWithRows na versão 0.7.1

Para mim, funciona bem no 0.7.1.

Não funciona no 0.8.0.

Ainda usando cloneWithRows vez de cloneWithRowsAndSections

cloneWithRows funciona para você yamill? Não para mim em 0.8.0.

@coderdave na verdade cloneWithRows também não funciona para mim. meu erro.

@sahrens @ide @michalraska meu scrollY prop não estava sendo atualizado. Eu estava basicamente tentando passar o deslocamento da rolagem para o meu componente, assim:

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

Mas corrigir essa linha me permitiu receber o scrollY prop para meu componente com sucesso. Eu me pergunto se essa mudança corrige todos os outros problemas.

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

Eu mudei de:

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

para

var shouldUpdateRow = true;

Também notei isso no 0.11.0-rc.

Aqui estão dois exemplos que podem reproduzir o problema.

Linhas: https://rnplay.org/apps/d3DM6A
Linhas + seções: https://rnplay.org/apps/xnyaYw

A solução temporária que criei foi rolar o ListView 1pt quando ele for montado.

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

Você pode descomentar esta seção dentro do exemplo em rnplay.org para teste.

Pergunta tola. Isso pode ter algo a ver com o uso do NavigatorIOS? Tive alguns problemas com renderização, preenchimento, etc., tudo quando uma exibição de lista foi renderizada como um filho do NavigatorIOS.

@jaygarcia Acho que não, pois o exemplo não faz uso do NavigatorIOS. Além disso, em meu próprio projeto, estou usando o Navigator em vez do NavigatorIOS.

1 para mim, estou encontrando este comportamento ao usar o Navigator. Estou no 0.11 e uso cloneWithRows.

Como solução alternativa, tive que usar a solução do @christopherdro , mas precisaria rolar o suficiente para renderizar meus itens (eles são grandes).

Curiosamente, a solução alternativa está relacionada à solução alternativa para esse bug: https://github.com/facebook/react-native/issues/1878, portanto, meu código final é:

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

ok, usando o código mencionado acima, encontrei alguns bugs bizarros em ScrollViews aninhados: Após a montagem, um evento onScroll foi disparado, reposicionando meu deslocamento de rolagem inicial nessas visualizações.

Ainda é um bug no 0.12.0. Esta é a hierarquia de visualização:

Mesmos problemas que @Sidnicious em 0.11.0. Meu aplicativo tem esse problema desde uma versão inicial do react-native. Tudo funciona como esperado se eu mover ListView para fora da hierarquia Navigator .

Estou tendo o mesmo problema ao usar 0.13.0-rc

Tenho este problema em 0.13.1 apenas com isto:

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

Para mim, este problema apenas apareceu ao atualizar de 0.14.2 para 0.16.0-rc . A correção que funcionou para mim foi definir o prop pageSize prop no ListView para 3. 2 não funcionou para mim, mas 3 funcionou muito bem.

¯_ (ツ) _ / ¯

mesmo problema aqui com 0.15.0, tentei todos os truques, sem sorte. ios 9.1 iphone 6

@nicklockwood - você pode ajudar aqui? Parece que ainda existem alguns bugs.

0,14, mesmo problema

Vinculando um problema LisView semelhante: https://github.com/facebook/react-native/issues/4728

Vinculando outro problema semelhante: https://github.com/facebook/react-native/issues/4179

Estou vendo isso no 0.16.0. Alguém colocou isso no radar do Product Pains? Este está se tornando muito doloroso. : /

Eu postei isso no Product Pains . Se ainda estiver afetando você, sinta-se à vontade para votar.

0,16, mesmo problema

O problema ainda persiste em 0.17 usando cloneWithRows no dataSource. A lista apenas renderiza itens quando está sendo rolada.

Eu estava vendo esse mesmo problema no 0.17, mas desativar removeClippedSubviews parece ter resolvido.

+1
Eu estava vendo esse mesmo problema no 0.17, mas a desativação de removeClippedSubviews parece ter corrigido o problema.

Para mim ainda acontece em 0,17 com ou sem removeClippedSubviews . O que percebi é que meu problema pode estar relacionado a contentOffset e initialListSize configurados manualmente. Se o deslocamento estiver além da altura dos elementos que seriam renderizados para initialListSize , ele não renderizaria os elementos necessários até que o usuário rolasse.

Também parece haver um problema com as listas que têm flexDirection: 'row' definido. Quando eu removo essa propriedade, todos os itens são renderizados. Se estiver definido, a lista renderiza inicialmente apenas dois itens.

Para o problema removeClippedSubviews ao usar o Navigator.
Você pode querer verificar https://github.com/machard/react-native-advanced-navigation onde o problema não ocorre (provavelmente porque a renderização é atrasada para depois que a visualização realmente está na tela)

Também há problemas com flexDirection: 'row' e flexWrap: 'wrap' definidos na propriedade contentContainerStyle . A solução alternativa que funciona para mim é definir pageSize .

versão react-nativa: 0.19.0

obrigado @jittuu definir a prop

definindo pageSize para quê?

@gre , depende do seu layout. Se suas visualizações são organizadas em linhas, pageSize deve ser um múltiplo dos itens por linha. Você pode experimentar o valor exato para ver como ele afeta o desempenho.

Você também deve definir initialListSize grande o suficiente para preencher a tela inteira.

Você pode achar a explicação neste commit útil: https://github.com/facebook/react-native/commit/e7005f7f5429422b6f2e9c2aa29c9d57bda7b77a

@jittuu Isso funcionou para mim; Eu também estava enfrentando o bug ao usar flexWrap .

obrigado @jittuu definir o pageSize com o valor 2 me resolveu o problema também !!

ainda tendo o problema ao fazer uma rolagem no listview, navegar no aplicativo e voltar.
pageSize não ajudou (tentei um valor diferente de 1 a 60).

@gre você está definindo initialListSize grande o suficiente? Existe um repositório que podemos visualizar?

@jaygarcia @nicklockwood Tenho uma demonstração para reproduzir este bug, repo url: ListNotRender

Passo:

1. abra o aplicativo.
2. clique no item "# 1" da barra de guias.
3. o item da lista não é renderizado até qualquer rolagem ..

Tenho certeza de que esse bug é relativo ao prop removeClippedSubviews do ListView, e o bug só ocorre quando é definido como verdadeiro.

Isso ainda está acontecendo para nós no RN 0.26.0. Mesma situação aqui:

• removeClippedSubviews={true}
• ListView é renderizado fora da tela
• ao ir para essa tela, a visualização da lista é deslizada até que o usuário interaja com ela

cc @javache

Eu acredito que isso foi corrigido por https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e

@javache Eu adicionei manualmente essa linha localmente e isso não corrigiu o problema.

Eu também apliquei este em cima dele https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7, mas também sem sucesso. ;)

o único commit https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e em cima do RN 0,28 ainda cria o bug para mim também.

Investigando um pouco sobre isso, estou me perguntando se o ListView ainda está sendo atualizado em segundo plano (por exemplo, durante uma atualização de rolagem), mesmo quando não está mais visível?

Porque, na verdade, o bug é facilmente reproduzível para mim se eu rolar a tela, faço uma navegação quando ela ainda está rolando com 'gravidade' , espere um pouco e clique novamente. A tela inteira ficará branca até que eu role novamente.
Mas esse é basicamente o único cenário em que esse bug acontece comigo. Este é o mesmo cenário de reprodução para todos ou o bug é mais amplo do que isso?

Esse cenário não está tão longe de @janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment -22799032.

É difícil descobrir o motivo desse bug, mas aqui estão meus 2 centavos:

Parece que as linhas são renderizadas _white_ durante o background. Ao tornar o scrollview visível novamente _ (por exemplo, voltar) _, eles ainda estão brancos, e eles não são atualizados _ (porque eles não têm razão para serem atualizados, eles são armazenados em cache) _ até que um novo scroll acontecer.

O bug seria corrigido se o ScrollView renderizasse seus filhos ( updateClippedSubviews ?) Apenas se ainda estivesse visível? (se as linhas não forem renderizadas durante o plano de fundo, elas nunca serão mostradas em branco novamente)

@javache 1fcd73f pode consertar o ListView do caso com uma ou duas linhas que não preencheram a tela inteira. nesse caso, mesmo scroll ListView não pode mostrar novamente a linha da lista.

Descobri uma maneira simples de reproduzir o bug:

1. Mostre um ListView com removeClippedSubViews = true;
2. Toque em uma linha para entrar na próxima página;
3. Gire a orientação da tela 90;
4. Gire a tela para trás;
5. Voltar para a tela ListView;

ListView ficará em branco, com mais linhas do que uma tela, role o ListView irá mostrar novamente, com linhas menos do que uma tela, mesmo scroll ListView não pode mostrar nada novamente. com 1fcd73f scroll ListView pode mostrar novamente :)

1. Ainda vendo este problema a partir de 0.26.3
2. Em meu projeto não RN, vi o problema no Android nativo.

A solução que escolhemos foi fazer um scrollTo 1px shift para frente e para trás emRefresh. É uma solução alternativa, mas funcionou em ambos os casos.

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

@JBerendes sim, esse hack funciona.

aqui está uma solução alternativa mais sofisticada que não interrompe a rolagem do usuário:

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

}

para colocar em sua abstração ListView. Então você precisa chamar scrollHackToWorkaroundWhiteBug no momento apropriado. Para mim, é toda vez que eu mudo de tela (antes e depois da transição).

Eu acho que isso está relacionado ao scrollRenderAheadDistance do ListView (porque ele renderiza as linhas não renderizadas depois de serem tocadas) e eu consegui corrigir isso definindo scrollRenderAheadDistance para um valor maior que 1800. Definitivamente, há uma correlação entre scrollRenderAheadDistance e o número de linhas que são renderizadas, mas é inconsistente. Descobri que geralmente é renderizado da seguinte maneira (embora às vezes ele renderize todas as linhas):

| scrollRenderAheadDistance | Número de linhas renderizadas |
| --- | --- |
| 1000 2 |
| 1200 | 2-5 |
| 1400 | 5 |
| 1600 | 6
| 1800 | 7 + |

Estou renderizando um ListView com linhas de 80pt de altura. Eu deduzi uma fórmula que deve ajudá-lo a definir exatamente scrollRenderAheadDistance para seu ListView:

scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)

No entanto, não entendo o significado de 680 (ou 340 * 2 ).

EDITAR: esta solução funciona em esquema de depuração, mas não de liberação (para iOS) ...

Ok, definir removeClippedSubviews como falso resolve o problema para mim.

Eu não encontrei isso até atualizar de 0,26 para 0,29, então algo foi introduzido em 0,27, 0,28 ou 0,29 (eu não testei contra 0,27 ou 0,28 ainda, mas posso se isso ajudar).

@gnestor Está quebrado em 0,29, verifique # 8607 e https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7

@gnestor @nihgwu Tenho certeza de que o bug não é uma regressão recente. Este problema foi criado há um ano, e eu pessoalmente tenho experimentado isso desde RN 0.13 e sempre usei uma solução alternativa para "sobreviver" com ListView. não usar removeClippedSubviews torna a lista grande vagarosa.
Talvez tenha havido tentativas de corrigi-lo ou, pelo menos, de reduzir os casos em que o bug aparece, mas isso ainda acontece mais ou menos como o que foi relatado nesta mensagem de problema inicial.

@gre, mas ainda acho que # 8607 foi introduzido em 0,29, é realmente problemático ir para a visualização em branco, acabei de reverter a alteração de https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 e tudo funciona bem como antes sem desligar removeClippedSubviews

Defina initialListSize como um valor adequado e defina removeClippedSubviews como falso resolva meu problema

Tenho este problema depois de atualizar de 0,28 para 0,29.
removeClippedSubviews={false} resolveu o problema.
Além disso, no meu caso, estou atualizando ListView altura em componentDidUpdate() .
Encapsular o código de atualização de altura em componentDidUpdate() com setTimeout com tempo limite personalizado também ajuda.

Eu também experimentei isso, mas foi em um ListView preenchido com dados locais. Eu também estava vendo isso apenas no iOS e depois de atualizar para 0.29. O ListView em questão usa this.state.dataSource.cloneWithRowsAndSections e componentDidMount é quando eu o carrego.

E então removeClippedSubviews={false} resolveu isso.

Definir removeClippedSubviews no meu componente ListView funcionou para mim. Eu só estava tendo esse problema com o esquema Release em 0.29 ao usar o componente Navigator padrão.

Eu tenho o mesmo problema, configurei flexDirection: 'row' e flexWrap: 'wrap', estou no RN 0.29.2. Em outros listviews (onde não configurei flexDirection: 'row'), não tenho esse problema.

A solução rápida, como outros usuários disseram, é definir initialListSize e pageSize adequados, mas acredito que isso tornará o aplicativo menos responsivo, por exemplo, se você tiver alguns filtros que mostrarão apenas as partes de uma lista de itens que você tem dentro do listview , tocar entre os filtros será lento porque a visualização em lista está tentando renderizar toda a área visível.

Em outros listviews, resolvi isso definindo initialListSize = 0 pageSize = 1. Mas não consigo no listview da grade (flexDirection: 'row' e flexWrap: 'wrap').

Estou acertando isso no RN v0.31.0-rc.0.

Adicionar removeClippedSubviews = {false} parece ter corrigido o problema.

"removeClippedSubviews = {false}" parece não ser uma boa solução, ele irá renderizar todas as linhas e tem problema de gerenciamento de memória. Alguém tem uma solução melhor, exceto "listView. ScrollTo" e "removeClippedSubviews"?

Este problema é muito pior no iOS 10 beta com RN 0.31 :-(

removeClippedSubviews não me ajudou no Android; em vez disso, tive que mudar de ListView para ScrollView .

Um bug realmente enorme. Eu também conheci.

Certifique-se de que todos votem positivamente em Product Pains. Já está bem alto, mas não o suficiente para chegar à caixa de entrada de alguém ainda :-( Aqui está o link

Neste ponto, eu diria que este é provavelmente o mesmo problema que o # 8607. Confira meu plano de como lidar com isso.

Continua existindo em 0.33.0

Ainda existe em 0,32

Eu conheci esse bug ontem, e definir removeClippedSubviews = {false} funcionou.

+1 em 0,33

Sim, eu também, mesmo problema! +1
0,33,
Editar:
removeClippedSubviews = {false}, corrigiu o problema para mim também.

+1

Você poderia experimentar este patch https://gist.github.com/majak/b0ee1fb6ca725d2cf810d2f0ab394f2e (de # 8607) e me dizer se ele ajuda com esse problema?

@majak Obrigado por compartilhar este patch. A gente só aplica, agora esse problema acabou (RN 0,34).

@majak isso parece consertar para mim também, bom trabalho!

isso está acontecendo em RN34, quando removeClippedSubviews={true}

Tive esse problema no React Native 0.34.
O problema só ocorreu quando eu:

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

no estilo do listview.

initialListSize={100}
consertou para mim

@majak, você está planejando criar um PR com esse patch?

@janmonschke yup! Siga o problema vinculado para atualizações.

Tive este problema no React Native 0.36

Posso confirmar que isso acontece em 0,36

Funciona perfeitamente no emulador, apenas no modo de depuração, mas nunca em um dispositivo. A lista nunca funciona em um dispositivo, tentei tudo o que foi recomendado acima, até substituí o ListView por ScrollView , tudo o que vejo no meu dispositivo Android é o navegador. (Até tentei colocar a lista fora do navegador)
0.37

Ainda consigo encontrar o problema em 0,36, mas obrigado pela solução!

Ainda estou vendo isso em 0.36.1

Ainda estou vendo isso em 0.36.1

existe em 0,31
initialListSize={1} resolva para mim

Tive este problema no React Native 0.38

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

isso corrige o problema na versão 0.38, não sei se funciona nas versões anteriores também.
este arquivo o problema na versão 0.38, não sei se trabalho nas primeiras versões

Este problema existe em 0,36.
Não foi possível fazer funcionar com removeClippedSubviews = {false} e initialListSize = {8}

mais de 1 ano se passou, essa questão ainda está em aberto ??

ainda existe em 0,39. definir removeClippedSubviews = {false} funciona.

"removeClippedSubviews = {false}" parece não ser uma boa solução, tenho uma nova solução e funciona para mim. Paltform iOS. Arquivo RCTView.m

devo criar um PR?

Alguém testou em RN0.40, não encontro mais esse problema depois de atualizar para RN0.40

Esse problema existe.
1, mostre um ListView com removeClippedSubViews = true;
2, toque em uma linha para entrar na próxima página;
3, gire a orientação da tela 90;
4, Voltar para a tela ListView;

ListView ficará em branco, com mais linhas do que uma tela, role a ListView para mostrar novamente

@endpress Eu segui seus passos, ainda não consigo reproduzi-los, usando RN0.41RC0

Tenho esse problema em 0,38.

Minha solução alternativa é alterar o paddingTop de ListView entre 0 e 1, portanto, o ListView será atualizado sempre.

Você pode tentar alterar backgroundColor, border, etc. Informe-me se outras propriedades funcionam.

@nihgwu ainda existe em 0.40.0

Este é o problema

@endpress the change (https://github.com/facebook/react-native/issues/1831#issuecomment-270552011) funciona para o meu caso e pode ajudar o Facebook / react-native # 8607 também.
Sei que o patch ainda está longe de ser perfeito, mas ainda assim sugiro que você crie um PR.

para mim, mesmo definindo initialListSize = {0} corrige rn 0.40.0

@majak Existe alguma boa notícia para esse problema fatal?

E quanto a https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 ?

FlatList ainda é experimental, então não há garantias de ter menos bugs ou mudar de maneiras incompatíveis com versões anteriores, mas você pode experimentá-lo por sua própria conta e risco.

@sahrens @gre É possível construir uma camada abstrata em cima de FlatList que forneça a mesma API que o antigo ListView para que nosso antigo código de aplicativo possa permanecer o mesmo.

@sahrens FlatList é implementado com UITableView?

Uma vez que FlatList esteja estabilizado e não seja mais experimental, podemos fazer um adaptador com uma API idêntica como ListView, ou talvez trocaremos a implementação de ListView nos bastidores.

Ele não usa UITableView. Na verdade, ele não usa nenhum código nativo novo, é tudo apenas JS com nossos primitivos nativos / de estrutura existentes - você pode ver a implementação aqui: https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32

@sahrens obrigado, é muito legal e útil.

@savanthongvanh definir o tamanho inicial para 0 tem o efeito de renderizar todos os itens no ListView no carregamento inicial. Tenha cuidado com isso se você tiver muitos itens.

Também lidando com este rn 0.41.2. Alguém tem uma implementação simples do FlatLIst que eu possa copiar, realmente esperando uma solução em breve.
Obrigado,
Ron

FlatList (andVirtualizedList) estão em master se você quiser brincar com eles.

Esta é uma maneira simples de começar agora a usar o FlatList para qualquer pessoa que lida com isso: https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b#.xnp03gd2u

Defina initialListSize com um valor adequado e defina removeClippedSubviews como false resolva meu problema

Obrigado @hoperce , com removeClippedSubviews funciona para mim, o initialListSize causa rolagem instável

Eu tenho RN .42 e não vejo nenhuma biblioteca experimental aqui para o FlatList, então estou preso até que possa atualizar (não por um tempo) com este problema.

Você sempre pode copiar o código FlatList em seu aplicativo, mesmo se não estiver usando a versão mais recente do RN.

Ainda posso reproduzir o bug "a visualização completa fica branca ao voltar" com FlatList. Estou me perguntando se não está mais relacionado ao ScrollView.

O problema de ficar branco por um breve período é totalmente diferente e exclusivo do FlatList. Estamos trabalhando para atenuá-lo, mas é uma consequência complicada da renderização em janela assíncrona. O bug a que esse problema se refere é onde nenhum conteúdo é visível na renderização inicial até que o usuário role, o que espero que seja corrigido com FlatList.

Eu também encontrei esse problema com ListView (e FlatList também).

Acabei de descobrir que poderia fazer com que a lista fosse renderizada corretamente, redefinindo minha fonte de dados para [] no construtor da visualização e, em seguida, redefinindo-a para a lista de itens em um setTimeout ()

FYI Meu listview está embutido em um ReactNavigation StackNavigator em um TabNavigator.

além disso, o hack para acionar uma rolagem de 1px programaticamente ainda funciona para ListView / FlatList. mas você precisa chamá-lo no ciclo de vida correto (geralmente quando você volta à tela).

@gre : você tem um aplicativo de reprodução para o problema com FlatList? Eu gostaria de consertar isso o mais rápido possível!

@gre , você tem um código de exemplo para isso? E você quer dizer em componentWillMount para esse componente englobando um ListView?

@ericvicenti - parece que leva alguns outros pedaços de código do RN. Eu estava preocupada que fosse pegar emprestados pedaços de outro lugar. Posso retirá-lo. Talvez jogue em um repositório para outras pessoas usarem - isso é permitido?

@sahrens, desculpe por estar no aplicativo da minha empresa, mas talvez eu possa tentar criar um exemplo em branco para reproduzi-lo!

@natdm um pouco acima em um comentário: https://github.com/facebook/react-native/issues/1831#issuecomment -231069668 - essa é a ideia básica, eu tenho mais ou menos divergido disso com um sistema que vai alterne entre -1px e 1px para que não acumule visualmente um pergaminho ao longo do tempo XD enorme hack

Estou tendo esse problema com SectionList - em branco na renderização inicial até que eu role. @sahrens existe uma solução à vista?

@smkhalsa , você tem uma reprodução clara? A configuração removeClippedSubviews = {false}

@sahrens Parece que definir removeClippedSubviews = {false} corrige isso para mim. Sem isso, recebo uma tela em branco sempre que navego para essa visualização específica.

Vou tentar isolar o problema em um novo repositório e publicá-lo, se puder.

o mesmo para mim (removeClippedSubviews definitivamente é um gatilho para o bug). acabamos de ter uma reprodução fácil em nosso aplicativo que tem listas dentro do react-native-tab-view. Não sei, entretanto, se um exemplo mais simples irá reproduzi-lo.

veja os 2 últimos parágrafos da minha resposta aqui https://github.com/facebook/react-native/issues/1831#issuecomment -228775913

Acho que pode ser algo em torno disso (apenas uma hipótese):

(1) a lista é renderizada em uma guia de fundo, uma vez que eles estão 'fora da caixa delimitadora' removeClippedSubviews irá assumir que eles não estão aqui e não irá renderizar nada (branco)
(2) quando a guia vai para o foco, e porque essa guia provavelmente usa algo como <StaticContainer> , nada é 'atualizado', ainda está branco
(3) assim que o usuário 'rolar', você atualiza a lógica removeClippedSubviews que agora determina que as células da lista estão visíveis e as atualiza.

Obrigado pela liderança @gre

ainda existe no RN 0.41.2, o android está ok, apenas o ios10, set removeClippedSubviews = {false} pode resolver este problema. Meu listView é pequeno, então não é um grande problema. O listView dentro de um stackNavigator de tabNavigator (react-navigation).

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

O mesmo problema aqui. Nada mais a acrescentar, a não ser removeClippedSubviews = {false} também resolveu para mim.

@agentilela Obrigado pela correção, mesmo problema aqui

A configuração removeClippedSubviews={false} corrigiu isso

este problema existe em react-native-maps MapView que AFAIK não usa ScrollView e não tem nada a ver com ListView .

O problema ainda está acontecendo no RN44, initialListSize={200} resolve o problema, mas não acho que seja uma boa solução de longo prazo, pois leva algum tempo para renderizar antes de exibi-lo. É óbvio em uma exibição de lista com mais de 100 linhas.

ps removeClippedSubViews={false} não resolve meu problema

removeClippedSubViews={false} trabalhou para mim por ListView .
Além disso, FlatList tem o mesmo problema.

Eu tenho o mesmo problema com ListView / FlatList e react-navegação.
Eu corrigi com lazy: true nas opções do TabNavigator e removeClippedSubViews={false} no ListView

Também posso confirmar que o bug ocorre no RN 0.44.0:

Acontece ao usar react-navigation + TabNavigator + (ListView ou FlatList).
Quando você acessa uma guia, ela parece vazia. Somente quando você rola um pouco, a lista é exibida.

A única guia onde isso não está acontecendo é no initialRouteName do TabNavigator

Como mencionado, definindo lazy: true on. o TabNavigator resolve isso.

mesmo problema aqui, corrigido com removeClippedSubViews
conforme descrito no problema duplicado https://github.com/facebook/react-native/issues/14069
Criei um repositório para reproduzir o problema https://github.com/jcharlet/react_native_listview_bug se isso puder ajudar.

Além disso, esse problema não acontece ao usar 'react-native-router-flux' em vez de 'react-navigation' para o mesmo caso de uso

Algum problema com a navegação reativa no TabNavigator. removeClippedSubViews = {false} não ajuda.

O mesmo problema para mim. Usando react-navigation com TabNavigator e StackNavigator como um filho na guia em questão e ListView simples. RN 0,44 / Expo 17, e nem removeClippedSubviews nem preguiçoso ajudaram para mim: - /

removeClippedSubviews me ajudou a corrigir a versão do IOS, mas para o Android eu tive que usar initialListSize

Com

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

e lazy: true em TabNavigator TabNavigatorConfig tudo renderiza bem:

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

Atualizando para
{
"reagir nativo": "0,44,2",
"react-navigation": "1.0.0-beta.11"
}
funcionou para mim, lazy = true não parece ser necessário para StackNavigator

{
"reagir nativo": "0,44,2",
"react-navigation": "1.0.0-beta.11"
}
preguiçoso = verdadeiro
removeClippedSubViews = {false}
não funciona

Isso é realmente interessante, eu gostaria de ver quando esse bug de 2 anos finalmente será encerrado.

Eu atualizei para react-native 0.44.2, react-navigation 1.0.0-beta.11 e configurei "lazy = true" no TabNavigator em questão e isso corrigiu. Talvez apenas definir lazy = true tivesse resolvido, mas eu já tinha atualizado.

@jhalborg Corrigi o problema para listas com FlatList & removeClippedSubViews = {false}.

Estou usando a navegação react e removeClippedSubViews funciona para mim com esta estrutura:

pilha modal -> presente pilha de guias -> inclui várias guias com pilhas de navegação

Meu problema era a falta de desempenho, então criei o valor removeClippedSubViews com base em um valor de estado para poder alternar entre ligado / desligado dependendo se a tela está carregando.

Tenho algumas listas que são recarregadas em outra guia, então uso algo como o seguinte:

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

Espero que isso ajude alguém, já que estava me incomodando por um tempo, mas acabou sendo uma solução bem simples.

Parece que agora esse problema pode ser resolvido, pelos seguintes motivos:

• Estamos recomendando que as pessoas usem FlatList / SectionList agora, nenhuma melhoria virá para ListView.
• Parece que uma solução alternativa razoável foi identificada no thread.

Pensamentos?

Não é um bug real? Se sim, por que encerrar o problema?

Sobre os motivos:

• Isso também acontece em FlatList, então não é um problema apenas de ListView.

• Remover removeClippedSubViews parece um hack com custos de desempenho, e não uma solução alternativa razoável na minha opinião.

Confirmando que este ainda é um bug ativo em FlatList / SectionList.

Há também alguns problemas relacionados ao desempenho de FlatList / SectionList, o que significa que algumas pessoas ainda não podem mover de ListView, parece estranho já tê-lo descontinuado.

Algo como o que postei acima pode ser integrado aos próprios componentes?

Que problemas você teve ao migrar do ListView?

13727

Não estou vendo nenhuma especificação de onde ListView é melhor. Observe que você pode aumentar o tamanho da janela ou desligar a virtualização se isso for um problema para você, já que ListView não faz nada disso.

Eu esperaria que eles respondessem às perguntas que você acabou de fazer antes de continuar, mas não vem ao caso, esse problema ainda ocorre no FlatList e deve permanecer aberto.

Apenas para conhecimento geral da comunidade.

Eu me deparei com esse problema em meu cenário onde estou usando, ou seja, ListView do Nested ListView dentro de uma linha de ListView. Minha solução foi corrigida aplicando removeClippedSubviews={false} ao ListView aninhado.

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

É impossível ter uma rolagem suave em listas grandes usando ListView / FlatList / VirtualizedList / WindowedListView (qualquer que seja) em hardware antigo como iPad 3 / iPad Mini executando iOS 9.x.

Observação: estou falando de listas simples, sem imagens, apenas componentes de texto em linhas.

Alguém poderia compartilhar um exemplo funcional com um conjunto de dados de 7000 registros em que a rolagem é suave e não está instável, tente todas as configurações de atributos e sem sorte 😢

Concordo - estou limpando células fora de vista também para gerenciamento de memória. É uma pena que um componente tão essencial em muitos aplicativos seja tão deficiente em desempenho para muitos casos de uso. Eu vou mergulhar fundo nisso na próxima semana ou depois para ver se há algum ganho significativo de desempenho a ser obtido.

Em 10 de junho de 2017, 15h30 +1000, Ariel Falduto [email protected] , escreveu:

É impossível ter uma rolagem suave em listas grandes usando ListView / FlatList / VirtualizedList / WindowedListView (qualquer que seja) em hardware antigo como iPad 3 / iPad Mini executando iOS 9.x.
Observação: estou falando de listas simples, sem imagens, apenas componentes de texto em linhas.
Alguém poderia compartilhar um exemplo funcional com um conjunto de dados de 7000 registros em que a rolagem é suave e não está instável, tente todas as configurações de atributos e sem sorte 😢
-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub ou ignore a conversa.

Impressionante @lprhodes , aqui eu compartilho um caso de uso simples usando FlatList com ~ 200 registros, este exemplo é instável em um iPad 3 com 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);

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

Obrigado !!!

Seu código de exemplo tem muitas práticas inadequadas que são abordadas na documentação. Por exemplo, você está recriando e religando funções constantemente, o que é um imposto sobre a CPU e causa uma nova renderização desnecessária dos itens da lista. Você deve certificar-se de que seu componente ListItem é um PureComponent e certificar-se de que todos os adereços passados ​​a ele permaneçam iguais para evitar re-renderizações desnecessárias. É uma boa prática para o resto do seu aplicativo também.

Isso deve ajudar muito, mas não posso garantir um desempenho perfeito em dispositivos lentos. Quão melhor outros aplicativos, como o navegador da web, funcionam nesses dispositivos?

@outaTiME você também não deveria chamar loadFeed em cada renderização

O método de renderização

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

Melhor, mas definir debug tornará as coisas muito mais lentas. Você também deve se certificar de que está executando uma compilação de produção otimizada, não uma compilação de dev / depuração, ao avaliar o desempenho. Por último, você ainda está criando um novo objeto de estilo a cada renderização e pode usar initialScrollPosition em vez de chamar scrollToOffset em onMount.

@sahrens yup sem o debug e com otimização de produção funciona melhor com menos instabilidade, como eu disse antes, estou usando a expo 17 que usa react-native 0,44, acho que a nova versão do react-native (0,45 ) tem melhorias no FlatList .

A propósito, por que os estilos são criados em cada renderização? neste caso, a renderização com os estilos flex (no componente Feed ) são executados apenas uma vez:

1. App render
2. Feed render
3. Em seguida, vários FeedRow renderizar

Muito semelhante ao que @lprhodes me disse sobre o loadFeed em cada renderização, entendo que a renderização Feed é executada apenas uma vez, correto?

Quando você diz initialScrollPosition você quer dizer initialScrollIndex certo? não funciona como scrollToOffset eu preciso esconder ListHeaderComponent (48px de altura) quando Feed montado

E quanto a este aviso do console? estou usando um PureComponent para renderItem certo?

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}

Obrigado !!

Esse aviso é uma espécie de bug que foi corrigido no master, mas 85 segundos para sua montagem inicial é muito lento - você realmente deve cavar mais fundo em seu código para descobrir o que está demorando tanto. Existem muitos recursos disponíveis se você pesquisar o desempenho do React no Google ou pedir ajuda na comunidade mais ampla do React.

E sim, eu quis dizer initialScrollIndex . Você precisará implementar getItemLayout para que funcione, o que deve representar ListHeaderComponent .

ótimo @sahrens , estou com medo de hardware antigo como iPad 3 ou versão do sistema operacional iOS 9 ... testando em dispositivos mais novos não há problemas de desempenho, eu queria saber se mais alguém estava tendo o mesmo problema de hardware ... Em algum tempo Vou pedir à comunidade para ver se consigo algo mais profundo, thks !!!

Olá, o meu foi corrigido dando style={{ backgroundColor: 'white' }} à lista plana

Então, @hramos e @sahrens , qual é exatamente a melhor solução para esse problema com FlatList? Encontrando isso com a reação 0.44.0 usando react-native-tab-vew , não está muito claro o que a equipe principal está recomendando no momento.

@sjmueller não @sahrens dizer que este já está fixado no mestre?

@hramos Acabei de revisar todo esse tópico novamente. Eu posso ter perdido isso, mas em nenhum lugar eu vi @sahrens mencionar que FlatList ficando invisível está fixo no master. Nem vi um commit / PR que referencia este problema e, finalmente, nenhuma solução alternativa recomendada para corrigir o problema.

Vejo que @yaronlevi recomenda definir lazy={true} em react-native-tab-view ou TabNavigator , mas isso causa atrasos nervosos, mesmo em um iPhone 7 plus.

@knappdev diz que funciona sem lazy na 0.44.2 e além, então tentarei atualizar a partir da 0.44.0 e ver se obtenho sucesso.

Minha solução é ativar / desativar removeClippedSubviews, dependendo se a lista plana está em uso ou não.

  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 agora está desativado por padrão para FlatList.

Para problemas em dispositivos lentos, você experimentou o aplicativo RNTester FlatListExample?

Qual é o desempenho de FlatListExample para você?

removeClippedSubviews agora está desativado por padrão para FlatList.

Sim - é por isso que eu ligo quando estou realmente rolando. Eu fico menos nervosismo aleatório dessa forma.

Em seguida, substituo as células (muito) fora de vista por outras vazias, a fim de reduzir a memória ouvida mais do que o FlatList sozinho

Então, finalmente, ainda não há como consertar em vez de usar removeClippedSubviews={false} mesmo que custe tanto o desempenho?

A correção para mim foi desativar a depuração de js remotamente para o simulador de ios

A configuração lazy: true parece ter funcionado para mim. Ainda não testei o desempenho.

Resolvo este problema removeClippedSubViews={false}

MELHOR TRABALHO AO REDOR
Funciona em todos os hardwares / simuladores. removeClippedSubViews={false} nem sempre funciona no iPhone 7.

Certifique-se de forçar o movimento na exibição de lista.

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

Exemplo de referência.

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

O problema é que pode já ter sido montado

Em 24 de agosto de 2017, às 15:44, Peter Suwara [email protected] escreveu:

GAMBIARRA
Funciona em todos os hardwares / simuladores.

'' 'componentDidMount () {
requestAnimationFrame (() => {
// HACK PARA RECUPERAR DADOS
this.refs._list.scrollTo ({x: 1, y: 0, animado: falso})
});
} '' '

'' '
ref = "_ lista"
dataSource = {this.state.dataSource}
renderRow = {(data, sectionId, rowId) =>}
renderSeparator = {(sectionId, rowId) =>}
removeClippedSubViews = {false}
initialListSize = {SortedBrandList.count}
/> '' '

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou ignore a conversa.

Resolvi esse problema, pelo menos no simulador, com:

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

Meu palpite aqui é que a rotina que gerencia clippedSubviews não está verificando os limites corretamente quando o ListView não está na tela. Isso acontece com bastante frequência com qualquer componente ListView que é renderizado fora da tela e, em seguida, se move na tela. Isso não deve ser um bug muito difícil de corrigir.

Tenho quase certeza de que essa função é o problema: https://github.com/facebook/react-native/blob/master/React/Views/RCTView.m#L321 -L369

Meu palpite é que o espaço de coordenadas que está medindo está incorreto em algum lugar. Olhando agora.

Esta pode ser a solução? https://github.com/facebook/react-native/pull/15669/files

Ainda não há solução para isso?

@petersuwara : o que você propôs trabalho. Obrigada. @MattFoley : Quando sua correção estará disponível para download?

Não específico apenas para FlatList, parece haver um problema em carregá-lo em um ListView também.
Eu encontrei uma solução alternativa usando um pequeno atraso na configuração da fonte de dados.

Quando os dados são carregados de uma fonte remota no método componentWillMount, o código a seguir é executado.
Parece funcionar:

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

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

        })
}

E durante o ligeiro atraso, você sempre pode mostrar uma tela de carregamento. É tão curto que nem mesmo é visível.

Descobri que o método de @nathvarun funciona. Parece haver alguma condição de corrida entre o encadeamento de montagem do componente e o encadeamento da fonte de dados de atualização do componente. Se este for realmente o caso, estou confuso por que isso aconteceria, uma vez que os dois threads devem funcionar sequencialmente bem um com o outro.

Isso ocorre em componentes que já estão montados, como telas atribuídas a guias na navegação de reação, mas estão mais selecionadas atualmente - então, não tenho certeza de como uma alteração em componentWillMount poderia corrigir isso.

Meu PR acima parece ter resolvido o problema, mas eu não tive sorte em conseguir mesclá-lo. Alguém mais gostaria de colaborar com esse PR?

@MattFoley Se for mesclado ou não. Estou usando seu código agora. E isso realmente resolveu meu problema.

Configurar TabNavigator de react-navigation para ser lazy: true também funciona ... Mas seria ótimo ver isso corrigido por react-native .

Se você estiver usando SectionList ou Flatlist, basta usar o ref = {(ref) => this.sectionList = ref}
e em seu código this.sectionList.recordInteraction () - deve renderizar sua visualização

A correção proposta de @MattFoley foi mesclada e agora faz parte da versão 0.50: https://github.com/facebook/react-native/commit/03ae65bc25185fe6d7f62e66f5575ced5c3e8378

Acabei de atualizar e ainda estou vendo este problema em <ListView /> . Estou fazendo algo errado? Aqui está meu 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"
  },

acho que ListView está obsoleto agora. é melhor tentar com FlatList e ver o que está acontecendo.

Eu acredito que ainda estamos vendo isso no 0.50.3. Alguém mais pode confirmar?

Corrigi esse problema mudando para FlatList.
Na sexta-feira, 17 de novembro de 2017 às 8h39, Colin Ramsay [email protected]
escreveu:

Eu acredito que ainda estamos vendo isso no 0.50.3. Alguém mais pode confirmar?

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/facebook/react-native/issues/1831#issuecomment-345294840 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt
.

Ah, já estamos _usando_ FlatList.

Este ainda é um problema com 0.50.3. removeClippedSubviews não parece ter nenhum efeito. Podemos reabrir isso, por favor?

Ainda temos um problema em 0.50.3. Por favor, reabra este.

Desculpe incomodar novamente, mas podemos reabrir isso, por favor? Este é um assunto urgente.

Corri para isso usando o mais recente Expo React Native SDK. Isso só acontece com o terceiro ListView em um TabNavigator. Se eu trocar a 2ª e a 3ª, a nova 3ª página será afetada. removeClippedSubviews corrigiu isso no meu caso.

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

usar this.listView.scrollToEnd() não funcionou , então tive que calcular manualmente as coordenadas do final da lista para então passar para scrollTo()

Para a lista plana, isso pode ser causado pela atualização da mesma matriz. FlatList verifica se os dados são diferentes. Portanto, faça uso de matrizes imutáveis

removeClippedSubviews = {false} corrige o bug para o meu caso.

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

@edmengel está certo. Eu estava trabalhando em um projeto e tinha exatamente o mesmo bug.

Antes de rolar:

Depois de rolar:

React-native-router-flux@^4.0.0-beta.27 é usado para a navegação e App.js retorna isso. Minha página de pesquisa contém um listview e tinha esse bug. Ele está na terceira guia.

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

Quando mudei a página de pesquisa (que contém uma visualização em lista) da terceira guia para a segunda guia, a visualização em lista funcionou bem.

Encontrou um Hack de trabalho para isso.

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

<Flatlist style={{ flex: 1 }}/>
Este truque funciona para mim.

O mesmo problema em 0.55.4 com ScrollView e ListView . Adicionar removeClippedSubviews={false} funciona.

Infelizmente, em nosso caso, não é uma opção, pois é necessário para evitar a perda de imagens no Android https://github.com/facebook/react-native/issues/13600#issuecomment -315629140

Rolar para frente e para trás na renderização só acontece após a navegação, portanto, parece que está fazendo a transição para uma tela inicialmente em branco.

Flexionar a visão também não ajudou.

Alguma outra sugestão?

Achei que só acontecia depois de certa posição de rolagem ...
https://streamable.com/l5arv

Usando chrome-devtools para inspecionar a vista, posso ver que todas as subvisualizações estão cortadas.

Ainda travado, @hramos por favor

Ainda está tendo problemas com uma função tão simples? É por isso que mudamos do React Native de volta para o código Native.

Se for assim tão simples, por favor, estenda a mão para consertar @petersuwara

Este problema foi resolvido por um tempo. Se isso estiver afetando você, _por favor, abra um novo problema_ e forneça o máximo de detalhes possível. Estou bloqueando esse problema porque o problema original relatado aqui foi corrigido e não está claro que cada pessoa que comentou depois está enfrentando exatamente o mesmo problema.

Usamos FlatList _extensively_ no Facebook, e nenhuma reclamação desse tipo surgiu internamente. É possível que esse tipo de problema ocorra com uma biblioteca de navegação específica, por exemplo. Abrir uma nova edição com mais informações sobre o seu problema, com uma lista clara de etapas para reprodução ou, de preferência, um pequeno projeto, seria de grande ajuda.