+1
Encontrando exactamente el mismo problema. Trabajó con 0.5 pero rompió con 0.6.

Esto debería arreglarse en 0.7

Estaba experimentando exactamente el mismo problema.

cloneWithRows funciona bien. pero cloneWithRowsandSections no lo hace.

¿Ves cloneWithRowsandSections que no funciona con 0.7?

Además, es posible que desee intentar configurar initialListSize en un número mayor, lo que podría ayudar como solución si las cosas no se arreglan en 0.7 para usted.

Un initialListSize más grande no ayuda y 0,7 no lo he probado todavía porque la dependencia de los proveedores. Como será posible, les haré saber alrededor de 0.7 si alguien no es más rápido :)

Al tener el mismo problema con cloneWithRows en la versión 0.6, estaba funcionando en 0.5.

No lo he probado en 0.7. Le daría una oportunidad. Sé que también intenté configurar initialListSize en un número más alto anteriormente y no ayudó.

trabajó en 0.7

Tampoco funciona en 0.7.1

Tener el mismo problema con cloneWithRows en la versión 0.7.1

Para mí funciona bien en 0.7.1.

No funciona en 0.8.0.

Todavía usando cloneWithRows lugar de cloneWithRowsAndSections

cloneWithRows funciona para ti yamill? No lo hace para mí en 0.8.0.

@coderdave en realidad cloneWithRows tampoco funciona para mí. mi error.

@sahrens @ide @michalraska mi scrollY prop no se estaba actualizando. Básicamente estaba tratando de pasar el desplazamiento de desplazamiento a mi componente, así:

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

Pero arreglar esta línea me permitió recibir el prop scrollY para mi componente con éxito. Me pregunto si este cambio soluciona todos los demás problemas.

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

Lo cambié de:

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

para

var shouldUpdateRow = true;

También he notado esto en 0.11.0-rc.

Aquí hay dos ejemplos que pueden reproducir el problema.

Filas: https://rnplay.org/apps/d3DM6A
Filas + Secciones: https://rnplay.org/apps/xnyaYw

La solución temporal que se me ocurrió fue desplazar el ListView 1pt cuando se monta.

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

Puede descomentar esta sección dentro del ejemplo en rnplay.org para probar.

Pregunta tonta. ¿Podría esto tener algo que ver con el uso de NavigatorIOS? Tuve algunos problemas con el renderizado, el relleno, etc., todo cuando se renderizó una vista de lista como un elemento secundario de NavigatorIOS.

@jaygarcia No lo creo ya que los ejemplos no hacen uso de NavigatorIOS. Además, en mi propio proyecto estoy usando Navigator en lugar de NavigatorIOS.

+1 para mí, actualmente estoy encontrando este comportamiento cuando uso Navigator. Estoy en 0.11 y uso cloneWithRows.

Como solución alternativa, tuve que usar la solución de @christopherdro , pero necesitaría desplazarla lo suficiente para que mis elementos se procesen (son grandes).

Curiosamente, la solución está relacionada con la solución para este error: https://github.com/facebook/react-native/issues/1878, por lo que mi código final es:

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

ok, usando el código mencionado anteriormente, obtuve algunos errores extraños en ScrollViews anidados: Después del montaje, se activó un evento onScroll que reposicionó mi desplazamiento de desplazamiento inicial en esas vistas.

Sigue siendo un error en 0.12.0. Aquí está la jerarquía de vistas:

Los mismos problemas que @Sidnicious en 0.11.0. Mi aplicación ha tenido este problema desde una versión anterior de react-native. Todo funciona como se esperaba si muevo ListView fuera de la jerarquía Navigator .

Estoy experimentando el mismo problema al usar 0.13.0-rc

Tengo este problema en 0.13.1 con solo esto:

    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 mí, este problema apareció al actualizar de 0.14.2 a 0.16.0-rc . La solución que funcionó para mí fue establecer el pageSize prop en ListView en 3. 2 no funcionó para mí, pero 3 funcionó muy bien.

¯_ (ツ) _ / ¯

mismo problema aquí con 0.15.0, probé todos los trucos, sin suerte. ios 9.1 iphone 6

@nicklockwood , ¿puedes ayudar aquí? Parece que todavía hay algunos errores.

0.14, mismo problema

Vinculando un problema LisView similar: https://github.com/facebook/react-native/issues/4728

Vinculando otro problema similar: https://github.com/facebook/react-native/issues/4179

Veo esto en 0.16.0. ¿Alguien ha puesto esto en el radar de Product Pains? Éste se está volviendo bastante doloroso. : /

He publicado esto en Product Pains . Si todavía te está afectando, no dudes en votarlo allí.

0.16, mismo problema

El problema aún persiste en 0.17 usando cloneWithRows en el origen de datos. La lista solo muestra los elementos cuando se desplaza.

Estaba viendo este mismo problema en 0.17, pero la desactivación de removeClippedSubviews parece haberlo solucionado.

+1
Estaba viendo este mismo problema en 0.17, pero la desactivación de removeClippedSubviews parece haberlo solucionado.

Para mí, todavía sucede en 0.17 con o sin removeClippedSubviews . Lo que sí noté fue que mi problema podría estar relacionado con un contentOffset configurado manualmente y initialListSize . Si el desplazamiento está más allá de la altura de los elementos que se renderizarían para initialListSize , no renderizaría los elementos requeridos hasta que el usuario se desplazara.

También parece haber un problema con las listas que tienen flexDirection: 'row' establecido. Cuando elimino esta propiedad, todos los elementos se procesan. Si está configurada, la Lista inicialmente muestra solo dos elementos.

Para el problema removeClippedSubviews al usar Navigator.
Es posible que desee consultar https://github.com/machard/react-native-advanced-navigation donde no ocurre el problema (probablemente porque el renderizado se retrasa después de que la vista está realmente en la pantalla)

También hay un problema con flexDirection: 'row' y flexWrap: 'wrap' establecidos en la propiedad contentContainerStyle . La solución alternativa que me funciona es establecer pageSize .

versión nativa de reacción: 0.19.0

gracias @jittuu configurando el prop pageSize lo hizo por mí también!

configurando pageSize a qué?

@gre depende de su diseño. Si sus vistas están organizadas en filas, pageSize debe ser un múltiplo de los elementos por fila. Puede experimentar con el valor exacto para ver cómo afecta el rendimiento.

También debe establecer initialListSize lo suficientemente grande como para llenar toda la pantalla.

Puede encontrar útil la explicación en este compromiso: https://github.com/facebook/react-native/commit/e7005f7f5429422b6f2e9c2aa29c9d57bda7b77a

@jittuu Esto funcionó para mí; También estaba experimentando el error al usar flexWrap .

gracias @jittuu establece el pageSize con el valor 2 me resolvió el problema también !!

sigue teniendo el problema al hacer un desplazamiento en la vista de lista, navegar por la aplicación y regresar.
pageSize no ayudó (probé un valor diferente de 1 a 60).

@gre, ¿está configurando initialListSize lo suficientemente grande? ¿Hay un repositorio que podamos ver?

@jaygarcia @nicklockwood Tengo una demostración para reproducir este error, URL del repositorio: ListNotRender

paso:

1. abre la aplicación.
2. haga clic en el elemento de la barra de pestañas "# 1".
3. El elemento de la lista no se procesa hasta que se realiza un desplazamiento.

Estoy seguro de que este error se relaciona con la propiedad removeClippedSubviews de ListView, y el error solo ocurre cuando se establece como verdadero.

Esto todavía nos está sucediendo en RN 0.26.0. Misma situación aquí:

• removeClippedSubviews={true}
• ListView se representa fuera de la pantalla
• al ir a esa pantalla, la vista de lista se desliza hasta que el usuario interactúa con ella

cc @javache

Creo que esto está solucionado por https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e

@javache Agregué manualmente esa línea localmente y no solucionó el problema.

También apliqué este encima https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 pero tampoco tuve éxito. ;)

la única confirmación https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e sobre RN 0.28 todavía me crea el error.

Investigando un poco sobre esto, me pregunto si ListView todavía se está actualizando en segundo plano (por ejemplo, durante una actualización de desplazamiento) incluso cuando ya no es visible.

Porque, de hecho, el error es fácilmente reproducible para mí si me desplazo por la vista, hago una navegación cuando todavía se está desplazando con 'gravedad' , espero un poco y hago clic en Atrás. La pantalla completa será blanca hasta que vuelva a desplazarme.
Pero ese es básicamente el único escenario en el que me pasa este error. ¿Es este ~ el mismo escenario de reproducción para todos, o el error es más amplio que esto?

Ese escenario no está tan lejos de @janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment -22799032.

Es difícil averiguar la razón de este error, pero aquí están mis 2 centavos:

Parece que las filas se renderizan _blancas_ durante el fondo. Cuando se vuelve a hacer visible la vista de desplazamiento _ (por ejemplo, volver) _, siguen en blanco y no se actualizan _ (porque no tienen razón para actualizarse, se almacenan en caché) _ hasta que se produce un nuevo desplazamiento.

¿Corregiría el error si ScrollView representara a sus hijos ( updateClippedSubviews ?) Solo si todavía está visible? (si las filas no se renderizan durante el fondo, nunca se volverán a mostrar en blanco)

@javache 1fcd73f puede arreglar el caso ListView con una o dos filas que no llenaron la pantalla completa. en ese caso, incluso el ListView de desplazamiento no puede volver a mostrar la fila de la lista.

Encuentro una forma sencilla de reproducir el error:

1. Muestra un ListView con removeClippedSubViews = true;
2. Toque una fila para entrar en la página siguiente;
3. Gire la orientación de la pantalla 90;
4. Gire la pantalla hacia atrás;
5. Volver a la pantalla ListView;

ListView estará en blanco, con filas más que una pantalla, desplácese, ListView se volverá a mostrar, con filas menos que una pantalla, incluso el ListView de desplazamiento no puede volver a mostrar nada. con 1fcd73f scroll ListView puede volver a mostrar :)

1. Sigo viendo este problema a partir de 0.26.3
2. En mi proyecto sin RN vi el problema en Android nativo.

La solución que elegimos fue hacer un desplazamiento de scrollTo 1px hacia adelante y hacia atrás en Refresh. Es una solución alternativa, pero ha funcionado en ambos casos.

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

@JBerendes sí, este truco funciona.

aquí hay una solución alternativa más sofisticada que no interrumpe el desplazamiento del usuario:

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 poner en su abstracción ListView. Entonces necesitas llamar a scrollHackToWorkaroundWhiteBug en el momento apropiado. Para mí es cada vez que cambio de pantalla (antes y después de la transición).

Creo que esto está relacionado con el scrollRenderAheadDistance ListView (porque muestra las filas no renderizadas después de ser tocadas) y he logrado solucionarlo estableciendo el scrollRenderAheadDistance en un valor mayor que 1800. Definitivamente existe una correlación entre scrollRenderAheadDistance y el número de filas que se representan, pero es inconsistente. Descubrí que generalmente se representa de la siguiente manera (aunque a veces representará todas las filas):

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

Estoy renderizando un ListView con filas de 80 puntos de altura. He obtenido una fórmula que debería ayudarlo a establecer exactamente el scrollRenderAheadDistance correcto para su ListView:

scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)

Sin embargo, no entiendo el significado de 680 (o 340 * 2 ).

EDITAR: Esta solución funciona en el esquema de depuración pero no de lanzamiento (para iOS) ...

Ok, establecer removeClippedSubviews en falso me resuelve el problema.

No encontré esto hasta que actualicé de 0.26 a 0.29, por lo que se introdujo algo en 0.27, 0.28 o 0.29 (aún no he probado contra 0.27 o 0.28, pero puedo si eso ayuda).

@gnestor Está roto en 0.29, verifique # 8607 y https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7

@gnestor @nihgwu Estoy bastante seguro de que el error no es una regresión reciente. Este problema se creó hace un año, y personalmente lo he experimentado desde RN 0.13 y siempre usé una solución para "sobrevivir" con ListView. no usar removeClippedSubviews hace que la lista grande se retrase.
Tal vez hubo intentos de solucionarlo o al menos de reducir los casos en los que aparece el error, pero esto sigue ocurriendo más o menos como lo que se informó en este mensaje de problema inicial.

@gre, pero sigo pensando que # 8607 se introdujo en 0.29, es realmente problemático ir a la vista en blanco, simplemente revierto el cambio de https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 y todo funciona muy bien como antes sin apagar removeClippedSubviews

Establezca initialListSize en un valor adecuado y establezca removeClippedSubviews en falso para resolver mi problema

Tengo este problema después de actualizar de 0.28 a 0.29.
removeClippedSubviews={false} resolvió el problema.
Además, en mi caso, estoy actualizando ListView height en componentDidUpdate() .
Envolver el código de actualización de altura en componentDidUpdate() con setTimeout con tiempo de espera personalizado también ayuda.

También experimenté esto, pero estaba en un ListView que se rellenó con datos locales. También estaba viendo esto solo en iOS y después de actualizar a 0.29. El ListView en cuestión usa this.state.dataSource.cloneWithRowsAndSections y componentDidMount es cuando lo cargo.

Y entonces removeClippedSubviews={false} abordó esto.

Configurar removeClippedSubviews en mi componente ListView funcionó para mí. Solo estaba experimentando este problema con el esquema Release en 0.29 cuando usaba el componente Navigator predeterminado.

Tengo el mismo problema, he configurado flexDirection: 'row' y flexWrap: 'wrap', estoy en RN 0.29.2. En otras vistas de lista (donde no he configurado flexDirection: 'fila') no tengo ese problema.

La solución rápida, como han dicho otros carteles, es establecer initialListSize y pageSize adecuados, pero creo que harán que la aplicación sea menos receptiva, por ejemplo, si tiene algunos filtros que mostrarán solo las partes de una lista de elementos que tiene dentro de la vista de lista , tocar entre filtros será lento porque la vista de lista está tratando de reproducir toda el área visible.

En otras vistas de lista, resolví esto configurando initialListSize = 0 pageSize = 1. Pero no puedo en la vista de lista de cuadrícula (flexDirection: 'row' y flexWrap: 'wrap').

Estoy golpeando esto en RN v0.31.0-rc.0.

Agregar removeClippedSubviews = {false} parece haber solucionado el problema.

"removeClippedSubviews = {false}" parece no ser una buena solución, renderizará todas las filas y tiene un problema de gestión de memoria. ¿Alguien tiene una mejor solución excepto "listView. ScrollTo" y "removeClippedSubviews"?

Este problema es mucho peor en ios 10 beta con RN 0.31 :-(

removeClippedSubviews no me ayudó en Android, tuve que pasar de ListView a ScrollView lugar.

Un error realmente enorme. Yo también lo conocí.

Asegúrese de que todos lo voten a favor de Product Pains. Ya está bastante alto, pero no lo suficientemente alto como para aterrizar en la bandeja de entrada de alguien todavía :-( Aquí está el enlace

En este punto, diría que este es probablemente el mismo problema que el # 8607. Compruébelo para ver mi plan de cómo abordarlo.

Sigue existiendo en 0.33.0

Todavía existe en 0.32

Encontré este error ayer y la configuración de removeClippedSubviews = {false} funcionó.

+1 en 0.33

¡Sí, yo, el mismo problema! +1
0,33,
Editar:
removeClippedSubviews = {false}, solucionó el problema para mí también.

+1

¿Podría probar este parche https://gist.github.com/majak/b0ee1fb6ca725d2cf810d2f0ab394f2e (de # 8607) y decirme si ayuda con este problema?

@majak Gracias por compartir este parche. Simplemente lo aplicamos, ahora este problema se ha ido (RN 0.34).

@majak, esto parece arreglarlo para mí también, ¡buen trabajo!

esto está sucediendo en RN34, cuando removeClippedSubviews={true}

Tuve este problema en React Native 0.34.
El problema solo ocurrió cuando tuve:

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

en el estilo de vista de lista.

initialListSize={100}
me lo arregló

@majak, ¿estás planeando crear un PR con ese parche?

@janmonschke ¡

Tuve este problema en React Native 0.36

Puedo confirmar que esto sucede en 0.36

Funciona perfectamente en emulador, solo en modo de depuración, pero nunca en un dispositivo. La lista nunca funciona en un dispositivo, probé todo lo recomendado anteriormente, incluso reemplacé ListView con ScrollView , todo lo que veo en mi dispositivo Android es navegador. (Incluso intenté poner la lista fuera del navegador)
0.37

Todavía puedo encontrar el problema en 0.36, ¡pero gracias por la solución!

Todavía lo veo en 0.36.1

Todavía lo veo en 0.36.1

existen en 0.31
initialListSize={1} resuélvelo por mí

Tuve este problema en React Native 0.38

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

esto soluciona el problema en la versión 0.38, no se si en versiones anteriores también funcione.
this archive the problem in versión 0.38, i don't know if work on early versions

Este problema existe en 0.36.
No se pudo hacer que funcione con removeClippedSubviews = {false} y initialListSize = {8}

¿Ha pasado más de 1 año, este problema sigue abierto?

todavía existe en 0.39. set removeClippedSubviews = {false} funciona.

"removeClippedSubviews = {false}" parece no ser una buena solución, tengo una nueva solución y funciona para mí. Plataforma iOS. Archivo RCTView.m

¿Debo crear un PR?

Alguien ha probado en RN0.40, ya no me encuentro con este problema después de actualizar a RN0.40

Este problema existe.
1, muestra un ListView con removeClippedSubViews = true;
2, toque una fila para entrar en la página siguiente;
3, girar la orientación de la pantalla 90;
4, Volver a la pantalla ListView;

ListView estará en blanco, con filas más que una pantalla, desplácese y ListView se volverá a mostrar

@endpress He seguido tus pasos, todavía no puedo reproducirlo, usando RN0.41RC0

Tiene este problema en 0.38.

Mi solución es cambiar el paddingTop de ListView entre 0 y 1, por lo que ListView se actualizará cada vez.

Puede intentar cambiar backgroundColor, border, etc. Por favor, avíseme si otras propiedades funcionan.

@nihgwu todavía existe en 0.40.0

Este es el problema

@endpress el cambio (https://github.com/facebook/react-native/issues/1831#issuecomment-270552011) funciona para mi caso, y también puede ayudar a facebook / react-native # 8607.
Sé que el parche aún puede estar lejos de ser perfecto, pero aún así te sugiero que crees un PR.

para mí incluso establecer initialListSize = {0} lo corrige rn 0.40.0

@majak ¿Hay alguna buena noticia sobre este problema fatal?

¿Qué hay de https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 ?

FlatList todavía es experimental, por lo que no hay garantías de que tenga menos errores o cambie de formas incompatibles con versiones anteriores, pero puede probarlo bajo su propio riesgo.

@sahrens @gre ¿Es posible construir una capa abstracta en la parte superior de FlatList que proporcione la misma API que el ListView anterior para que nuestro código de aplicación anterior pueda mantener el mismo?

@sahrens FlatList se implementa con UITableView?

Una vez que FlatList esté estabilizado y ya no sea experimental, podríamos hacer un adaptador con una API idéntica a ListView, o tal vez cambiemos la implementación de ListView bajo el capó.

No usa UITableView. En realidad, no usa ningún código nativo nuevo, todo es solo JS con nuestras primitivas nativas / de marco existentes; puede ver la implementación aquí: https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32

@sahrens gracias, es bastante interesante y útil.

@savanthongvanh establecer el tamaño inicial en 0 tiene el efecto de representar todos los elementos en ListView en la carga inicial. Tenga cuidado con esto si tiene muchos artículos.

También se ocupa de este rn 0.41.2. ¿Alguien tiene una implementación simple de FlatLIst que pueda copiar, realmente esperando una solución pronto?
Gracias,
ron

FlatList (yVirtualizedList) están en master si quieres jugar con ellos.

Aquí hay una forma sencilla de comenzar ahora con FlatList para cualquiera que esté lidiando con esto: https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b#.xnp03gd2u

Establezca initialListSize en un valor adecuado y establezca removeClippedSubviews en falso para resolver mi problema

Gracias @hoperce , con removeClippedSubviews funciona para mí, el initialListSize causa un desplazamiento entrecortado

Tengo RN .42 y no veo ninguna biblioteca experimental aquí para FlatList, así que estoy atascado hasta que pueda actualizar (no por un tiempo) con este problema.

Siempre puede copiar el código FlatList en su aplicación, incluso si no está utilizando la última versión de RN.

Todavía puedo reproducir el error "la vista completa se vuelve blanca al retroceder" con FlatList. Me pregunto si no está más relacionado con ScrollView.

El problema de pasar brevemente al blanco es totalmente diferente y exclusivo de FlatList. Estamos trabajando para mitigarlo, pero es una consecuencia complicada de la representación en ventana asincrónica. El error al que se refiere este problema es donde no hay contenido visible en el renderizado inicial hasta que el usuario se desplaza, lo que espero se solucione con FlatList.

También encontré este problema con ListView (y FlatList también).

Acabo de descubrir que podría hacer que la lista se renderice correctamente restableciendo mi fuente de datos a [] en el constructor de la vista y luego restableciéndola a la lista de elementos en un setTimeout ()

FYI My listview está incrustado en un ReactNavigation StackNavigator en un TabNavigator.

Además, el truco para activar un desplazamiento de 1px mediante programación todavía funciona tanto para ListView / FlatList. pero debe llamarlo en el ciclo de vida correcto (generalmente cuando regresa a la pantalla).

@gre : ¿tienes una aplicación de reproducción para el problema con FlatList? ¡Me gustaría arreglarlo lo antes posible!

@gre , ¿tienes un código de ejemplo para eso? ¿Y quiere decir en componentWillMount para ese componente que abarca un ListView?

@ericvicenti : parece que se necesitan muchas otras piezas de código de RN. Me preocupaba que fuera a tomar prestadas partes y piezas de otros lugares. Puedo sacarlo. Tal vez ponerlo en un repositorio para que lo usen otras personas, ¿está permitido?

@sahrens siento que esté en la aplicación de mi empresa, ¡pero tal vez pueda intentar crear un ejemplo en blanco para reproducirlo!

@natdm un poco más arriba en un comentario: https://github.com/facebook/react-native/issues/1831#issuecomment -231069668 - esta es la idea básica, me he desviado más o menos de esto con un sistema que alternar entre -1px y 1px para que no acumule visualmente un desplazamiento con el tiempo XD enorme hack

Tengo este problema con SectionList: en blanco en el procesamiento inicial hasta que me desplazo. @sahrens, ¿hay una solución a la vista?

@smkhalsa ¿tienes una reproducción clara? ¿La configuración removeClippedSubviews = {false}?

@sahrens Parece que la configuración de removeClippedSubviews = {false} soluciona esto por mí. Sin esto, aparece una pantalla en blanco cada vez que navego a esta vista en particular.

Intentaré aislar el problema en un repositorio nuevo y publicarlo si puedo.

Lo mismo para mí (removeClippedSubviews definitivamente es un desencadenante del error). Acabamos de tener una reproducción fácil en nuestra aplicación que tiene listas dentro de react-native-tab-view. Sin embargo, no sé si un ejemplo más simple lo reproducirá.

vea los 2 últimos párrafos de mi respuesta aquí https://github.com/facebook/react-native/issues/1831#issuecomment -228775913

Creo que podría ser algo en torno a eso (solo una hipótesis):

(1) la lista se representa en una pestaña de fondo, ya que están 'fuera del cuadro delimitador' removeClippedSubviews asumirá que no están aquí y no representarán nada (blanco)
(2) cuando la pestaña se enfoca, y debido a que esa pestaña probablemente usa algo como <StaticContainer> , nada se 'actualiza', sigue siendo blanco
(3) tan pronto como el usuario se 'desplaza', actualiza la lógica removeClippedSubviews que ahora determina que las celdas de la lista son visibles y las actualiza.

Gracias por el plomo @gre

todavía existe en RN 0.41.2, android está bien, solo ios10, set removeClippedSubviews = {false} puede resolver este problema. Mi listView es pequeño, por lo que no es un gran problema. El listView dentro de un 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>
    );
  }

El mismo problema aquí. Nada más que agregar, aparte de removeClippedSubviews = {false} lo resolvió para mí también.

@agentilela Gracias por la solución, el mismo problema aquí

Configurando removeClippedSubviews={false} arregló

este problema existe en react-native-maps MapView que AFAIK no usa ScrollView y no tiene nada que ver con ListView .

El problema sigue ocurriendo en RN44, initialListSize={200} resuelve el problema, pero no creo que sea una buena solución a largo plazo, ya que lleva algún tiempo renderizar antes de mostrarlo. Es obvio en una vista de lista que tiene más de 100 filas.

ps removeClippedSubViews={false} no resuelve mi problema

removeClippedSubViews={false} me funcionó por ListView .
Además, FlatList tiene el mismo problema.

Tengo el mismo problema con ListView / FlatList y react-navigation.
Lo he arreglado con lazy: true en las opciones de TabNavigator y removeClippedSubViews={false} en ListView

También puedo confirmar que el error ocurre en RN 0.44.0:

Ocurre cuando se usa react-navigation + TabNavigator + (ListView o FlatList).
Cuando vas a una pestaña, parece vacía. Solo cuando se desplaza un poco, se muestra la lista.

La única pestaña donde no está sucediendo es en initialRouteName del TabNavigator

Como se mencionó, configurar lazy: true en. el TabNavigator resuelve esto.

mismo problema aquí, solucionado con removeClippedSubViews
como se describe en el número duplicado https://github.com/facebook/react-native/issues/14069
Creé un repositorio para reproducir el problema https://github.com/jcharlet/react_native_listview_bug si puede ser de alguna ayuda.

Además, este problema no ocurre cuando se usa 'react-native-router-flux' en lugar de 'react-navigation' para el mismo caso de uso

Algún problema con la navegación de reacción en TabNavigator. removeClippedSubViews = {false} no ayuda.

El mismo problema para mí. Usando react-navigation con TabNavigator y StackNavigator como un niño en la pestaña en cuestión, y ListView simple. RN 0.44 / Expo 17, y ni removeClippedSubviews ni lazy me ayudaron: - /

removeClippedSubviews me ayudó a arreglar la versión de IOS, pero para Android tuve que usar initialListSize

Con

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

y lazy: true en TabNavigator TabNavigatorConfig todo se ve bien:

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

Actualizar a
{
"react-native": "0.44.2",
"react-navigation": "1.0.0-beta.11"
}
funcionó para mí, lazy = true no parece ser necesario para StackNavigator

{
"react-native": "0.44.2",
"react-navigation": "1.0.0-beta.11"
}
perezoso = verdadero
removeClippedSubViews = {false}
no funciona

Esto es realmente interesante, me gustaría ver cuándo finalmente se cerrará este error de 2 años.

Actualicé a react-native 0.44.2, react-navigation 1.0.0-beta.11, y configuré "lazy = true" en el TabNavigator en cuestión y eso lo solucionó. Quizás simplemente establecer lazy = true hubiera hecho el truco, pero ya lo había actualizado.

@jhalborg He solucionado el problema de las listas con FlatList & removeClippedSubViews = {false}.

Estoy usando react-navigation y removeClippedSubViews funciona para mí con esta estructura:

pila modal -> pila de pestañas actual -> incluye múltiples pestañas con pilas de navegación

Mi problema fue la falta de rendimiento, así que hice el valor removeClippedSubViews basado en un valor de estado para poder activarlo / desactivarlo dependiendo de si la pantalla se está cargando.

Tengo algunas listas que se recargan mientras estoy en otra pestaña, así que uso algo como lo siguiente:

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 esto ayude a alguien, ya que me había estado molestando por un tiempo, pero terminó siendo una solución bastante simple.

Parece que este problema ahora se puede solucionar, por las siguientes razones:

• Recomendamos a las personas que usen FlatList / SectionList ahora, no habrá mejoras en ListView.
• Parece que se ha identificado una solución alternativa razonable en el hilo.

¿Pensamientos?

¿No es esto un error real? Si es así, ¿por qué cerrar el problema?

Sobre las razones:

• También ocurre en FlatList, por lo que no es un problema exclusivo de ListView.

• Eliminar removeClippedSubViews parece un truco con costos de rendimiento, no una solución razonable en mi opinión.

Confirmando que esto todavía es un error activo dentro de FlatList / SectionList.

También hay algunos problemas relacionados con el rendimiento de FlatList / SectionList, lo que significa que algunas personas aún no pueden moverse de ListView, parece extraño que ya lo hayan desaprobado.

¿Podría algo como lo que publiqué arriba integrarse en los propios componentes?

¿Qué problemas ha tenido al migrar desde ListView?

13727

No veo ningún detalle de dónde es mejor ListView. Tenga en cuenta que puede aumentar el tamaño de la ventana o desactivar la virtualización si eso es un problema para usted, ya que ListView no hace nada de eso.

Esperaría a que respondieran a las preguntas que acaba de hacer antes de continuar, pero no viene al caso, este problema todavía ocurre en FlatList y debería permanecer abierto.

Solo para conocimiento general de la comunidad.

Me encontré con este problema en mi escenario en el que estoy usando ListView anidado, es decir, ListView dentro de una fila de ListView. Mi solución se solucionó aplicando removeClippedSubviews={false} al ListView anidado.

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

Es imposible tener un desplazamiento suave en listas grandes usando ListView / FlatList / VirtualizedList / WindowedListView (lo que sea) en hardware antiguo como iPad 3 / iPad Mini con iOS 9.x.

Nota: estoy hablando de listas planas, sin imágenes, solo componentes de texto en filas.

Alguien podría compartir un ejemplo funcional con un conjunto de datos de 7000 registros donde el desplazamiento es suave y no entrecortado, intento todas las configuraciones de atributos y no tengo suerte 😢

De acuerdo, también estoy limpiando las celdas que están fuera de la vista para la gestión de la memoria. Es una pena que un componente tan esencial en muchas aplicaciones carezca de rendimiento para muchos casos de uso. Me sumergiré más o menos en él durante la próxima semana para ver si se pueden lograr mejoras significativas en el rendimiento.

El 10 de junio de 2017, 3:30 PM +1000, Ariel Falduto [email protected] , escribió:

Es imposible tener un desplazamiento suave en listas grandes usando ListView / FlatList / VirtualizedList / WindowedListView (lo que sea) en hardware antiguo como iPad 3 / iPad Mini con iOS 9.x.
Nota: estoy hablando de listas planas, sin imágenes, solo componentes de texto en filas.
Alguien podría compartir un ejemplo funcional con un conjunto de datos de 7000 registros donde el desplazamiento es suave y no entrecortado, intento todas las configuraciones de atributos y no tengo suerte 😢
-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub o silencie el hilo.

Impresionante @lprhodes , aquí comparto un caso de uso simple usando FlatList con ~ 200 registros, este ejemplo es entrecortado en un iPad 3 con 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);

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

Gracias !!!

Su código de ejemplo tiene muchas malas prácticas que se tratan en la documentación. Por ejemplo, está recreando y volviendo a enlazar funciones constantemente, lo que es un impuesto sobre la CPU y provoca que se vuelvan a representar innecesariamente los elementos de su lista. Debe asegurarse de que su componente ListItem sea un PureComponent, y asegúrese de que todos los accesorios que se le pasen permanezcan iguales para evitar re-renderizaciones innecesarias. También es una buena práctica para el resto de su aplicación.

Eso debería ayudar mucho, pero no puedo garantizar un rendimiento perfecto en dispositivos lentos. ¿Cuánto mejor funcionan otras aplicaciones como el navegador web en esos dispositivos?

@outaTiME tampoco deberías llamar a loadFeed en cada render

El método de renderizado de

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

Mejor, pero configurar debug ralentizará mucho las cosas. También debe asegurarse de ejecutar una compilación de producción optimizada, no una compilación de desarrollo / depuración, al evaluar el rendimiento. Por último, todavía está creando un nuevo objeto de estilo en cada render, y puede usar initialScrollPosition en lugar de llamar a scrollToOffset en onMount.

@sahrens sí sin la bandera debug y con optimizar la producción, la compilación se ejecuta mejor y menos entrecortada, como dije antes, estoy usando expo 17 que usa react-native 0.44, supongo que la nueva versión de react-native (0.45 ) tiene mejoras en FlatList .

por cierto, ¿por qué los estilos se crean en cada render? en este caso, el renderizado con los estilos flex (en el componente Feed ) se ejecuta solo una vez:

1. App render
2. Feed render
3. Luego, múltiples FeedRow render

Muy similar a lo que me dijo @lprhodes sobre el loadFeed en cada render, entiendo que el render Feed se ejecuta solo una vez, ¿es correcto?

Cuando dices initialScrollPosition te refieres a initialScrollIndex ¿verdad? no funciona como scrollToOffset necesito ocultar el ListHeaderComponent (48px de altura) cuando se monta Feed

¿Qué pasa con esta advertencia de la consola? Estoy usando un PureComponent para renderItem, ¿verdad?

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}

Gracias !!

Esa advertencia es una especie de error que se ha corregido en el maestro, pero 85 segundos para su montaje inicial son muy lentos; realmente debería profundizar en su código para descubrir qué está tardando tanto. Hay muchos recursos disponibles si busca en Google el rendimiento de React, o pregunta en la comunidad de React en general para obtener ayuda.

Y sí, quise decir initialScrollIndex . Deberá implementar getItemLayout para que funcione, lo que debería representar ListHeaderComponent .

genial @sahrens , tengo miedo del hardware antiguo como el iPad 3 o la versión del sistema operativo iOS 9 ... probando en dispositivos más nuevos no hay problemas de rendimiento, quería saber si alguien más estaba experimentando el mismo problema de hardware ... En un tiempo Le pediré a la comunidad que vea si llego a algo más profundo, ¡gracias!

Hola mío arreglado dando style={{ backgroundColor: 'white' }} a la lista plana

Entonces @hramos & @sahrens , ¿cuál es exactamente la mejor solución para este problema con FlatList? Me encontré con esto con react 0.44.0 usando react-native-tab-vew , y no está muy claro qué recomienda el equipo central en este momento.

@sjmueller ¿no dijo @sahrens que esto ya está arreglado en el maestro?

@hramos Acabo de revisar todo este hilo nuevamente. Es posible que me lo haya perdido, pero en ninguna parte vi a @sahrens mencionar que FlatList que se vuelve invisible está fijo en el maestro. Tampoco vi un compromiso / RP que haga referencia a este problema y, finalmente, ninguna solución alternativa recomendada para solucionar el problema.

Veo que @yaronlevi recomienda configurar lazy={true} en react-native-tab-view o TabNavigator , pero eso provoca retrasos bruscos incluso en un iPhone 7 plus.

@knappdev dice que funciona sin lazy en 0.44.2 y más allá, así que intentaré actualizar desde 0.44.0 y veré si tengo éxito.

Mi solución es activar / desactivar removeClippedSubviews dependiendo de si la lista plana está en uso o no.

  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 ahora está desactivado de forma predeterminada para FlatList.

Para problemas en dispositivos lentos, ¿ha probado la aplicación RNTester FlatListExample?

¿Cómo funciona FlatListExample para usted?

removeClippedSubviews ahora está desactivado de forma predeterminada para FlatList.

Sí, es por eso que lo enciendo cuando realmente se desplaza. Tengo menos nerviosismo aleatorio de esa manera.

Luego reemplazo las celdas (muy) fuera de la vista con las vacías para reducir la memoria escuchada más de lo que FlatList lo hace por sí mismo

Entonces, finalmente, ¿todavía no hay forma de solucionarlo en lugar de usar removeClippedSubviews={false} incluso si el rendimiento cuesta tanto?

La solución para mí fue deshabilitar la depuración de js de forma remota para el simulador de ios

Establecer lazy: true parece haber funcionado para mí. Aún no he probado el rendimiento.

Resuelvo este problema por removeClippedSubViews={false}

MEJOR OBRA ALREDEDOR
Funciona en todos los hardware / simuladores. removeClippedSubViews={false} no siempre funciona en iPhone 7.

Asegúrese de forzar el movimiento en la vista de lista.

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

Ejemplo de referencia.

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

El problema es que puede que ya esté montado

El 24 de agosto de 2017, a las 3:44 pm, Peter Suwara [email protected] escribió:

SOLUCIÓN ALTERNA
Funciona en todos los hardware / simuladores.

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

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

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o silencie el hilo.

Resolví este problema, al menos en el simulador, con:

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

Supongo que la rutina que gestiona clippedSubviews no está comprobando los límites correctamente cuando ListView no está actualmente en la pantalla. Esto sucede con bastante frecuencia con cualquier componente ListView que se procesa fuera de la pantalla y luego se mueve en la pantalla. Esto no debería ser un error demasiado difícil de corregir.

Estoy bastante seguro de que esta función es el problema: https://github.com/facebook/react-native/blob/master/React/Views/RCTView.m#L321 -L369

Supongo que el espacio de coordenadas que está midiendo es incorrecto en algún lugar. Mirándolo ahora.

¿Esta puede ser la solución? https://github.com/facebook/react-native/pull/15669/files

¿Todavía no hay solución para esto?

@petersuwara : lo que @MattFoley : ¿Cuándo estará disponible su corrección para descargar?

No es específico solo para FlatList, también parece ser un problema al cargarlo en un ListView.
Encontré una solución mediante un ligero retraso en la configuración de la fuente de datos.

Cuando los datos se cargan desde una fuente remota en el método componentWillMount, se ejecuta el siguiente código.
Parece funcionar :

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

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

        })
}

Y durante el ligero retraso, siempre puede mostrar una pantalla de carga. Es tan corto que ni siquiera es visible.

Encontré que el método de @nathvarun funciona. Parece haber alguna condición de carrera entre el subproceso de montaje del componente y el subproceso de la fuente de datos de actualización del componente. Si este es realmente el caso, estoy confundido por qué sucedería esto, ya que los dos hilos deberían jugar secuencialmente bien entre sí.

Esto ocurre en componentes que ya están montados, como las pantallas asignadas a pestañas en la navegación de reacción, pero que están más seleccionadas actualmente, por lo que no estoy seguro de cómo una enmienda a componentWillMount podría solucionar esto.

Mi PR anterior parece haber solucionado el problema, pero no he tenido suerte al fusionarlo. ¿Alguien más le gustaría intervenir en ese PR?

@MattFoley Ya sea que se

Configurar el TabNavigator de react-navigation para que sea lazy: true también funciona ... Pero sería genial ver esto arreglado por react-native .

Si está usando SectionList o Flatlist, simplemente use ref = {(ref) => this.sectionList = ref}
y en su código this.sectionList.recordInteraction () - debería representar su vista

La solución propuesta de @MattFoley se ha fusionado y ahora es parte de la versión 0.50: https://github.com/facebook/react-native/commit/03ae65bc25185fe6d7f62e66f5575ced5c3e8378

Acabo de actualizar y sigo viendo este problema en <ListView /> . ¿Estoy haciendo algo mal? Aquí está mi 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"
  },

Creo que ListView está obsoleto. es mejor intentarlo con FlatList y ver qué pasa.

Creo que todavía estamos viendo esto en 0.50.3. ¿Alguien más puede confirmar?

Solucioné este problema cambiando a FlatList.
El viernes 17 de noviembre de 2017 a las 8:39 a. M. Colin Ramsay [email protected]
escribió:

Creo que todavía estamos viendo esto en 0.50.3. ¿Alguien más puede confirmar?

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/facebook/react-native/issues/1831#issuecomment-345294840 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt
.

Ah, ya estamos _usando_ FlatList.

Esto sigue siendo un problema con 0.50.3. removeClippedSubviews no parece tener ningún efecto. ¿Podemos reabrir esto por favor?

Todavía tenemos un problema en 0.50.3. Vuelva a abrir este.

Perdón por molestarme de nuevo, pero ¿podemos reabrir esto, por favor? Este es un tema urgente.

Me encontré con esto usando el último SDK nativo de Expo React. Solo le ocurre al tercer ListView en un TabNavigator. Si cambio la 2ª y la 3ª, la nueva 3ª página se verá afectada. Sin embargo, removeClippedSubviews lo solucionó en mi caso.

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); }); funcionó para mí.

usar this.listView.scrollToEnd() no funcionó , así que tuve que calcular manualmente las coordenadas del final de la lista para luego pasar a scrollTo()

Para la lista plana, esto podría deberse a la actualización de la misma matriz. FlatList comprueba si los datos son diferentes. Así que haz uso de matrices inmutables

removeClippedSubviews = {false} corrige el error de mi caso.

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

@edmengel tiene razón. Estaba trabajando en un proyecto y tenía exactamente el mismo error.

Antes de desplazarse:

Después de desplazarse:

React-native-router-flux@^4.0.0-beta.27 se usa para la navegación y App.js devuelve esto. Mi página de búsqueda contiene una vista de lista y tenía este error. Está en la tercera pestaña.

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

Cuando cambié la página de búsqueda (que contiene una vista de lista) de la tercera pestaña a la segunda pestaña, la vista de lista funcionó bien.

Encontré un truco funcional para esto.

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

<Flatlist style={{ flex: 1 }}/>
Este truco funciona para mí.

Mismo problema en 0.55.4 con ScrollView y ListView . Agregar removeClippedSubviews={false} funciona.

Desafortunadamente, en nuestro caso, no es una opción, ya que se requiere para evitar que falten imágenes en Android https://github.com/facebook/react-native/issues/13600#issuecomment -315629140

El desplazamiento hacia adelante y hacia atrás en el renderizado solo ocurre después de la navegación, por lo que parece una transición a una pantalla inicialmente en blanco.

Flexionar la vista tampoco ayudó.

¿Cualquier otra sugerencia?

Descubrí que solo sucedía después de cierta posición de desplazamiento ...
https://streamable.com/l5arv

Usando chrome-devtools para inspeccionar la vista, puedo ver que todas las subvistas están recortadas.

Aún atascado, @hramos ,

¿Sigues teniendo problemas con una función tan simple? Es por eso que nos alejamos de React Native y volvimos al código nativo directo.

Si es así de simple, echa una mano para solucionarlo @petersuwara

Este problema ha estado cerrado por un tiempo. Si esto le está afectando, _por favor abra un nuevo problema_ y proporcione tantos detalles como sea posible. Estoy bloqueando este problema porque el problema original informado aquí se solucionó, y no está claro que todas las personas que comentaron después se enfrentan exactamente al mismo problema.

Usamos FlatList _extensively_ en Facebook, y no han surgido quejas de este tipo internamente. Es posible que este tipo de problema ocurra con una biblioteca de navegación en particular, por ejemplo. Abrir un nuevo número con más información sobre su problema, con una lista clara de pasos para reproducir, o idealmente un pequeño proyecto, sería de gran ayuda.