0
297
Visualizações¿Cómo se hace que el ListHeaderComponent de un React Native FlatList sea pegajoso?
Tengo una FlatList que es deliberadamente más ancha que el ancho de la pantalla.
La lista se desplaza verticalmente para ver cada fila y se ubica en un ScrollView horizontal para acceder a elementos fuera de la pantalla.
El accesorio ListHeaderComponent es básicamente una etiqueta del eje x que me gustaría comportar como un "encabezado congelado"; como en una hoja de cálculo.
¿Cómo hago que ListHeaderComponent sea fijo?
2 Respostas
Responde à pergunta0
Debe configurar prop en Flatlist como stickyHeaderIndices={[0]}
ListHeaderComponent : este accesorio establecería la vista del encabezado en la parte superior de FlatList .
stickyHeaderIndices={[0]} : Esta propiedad establecería el elemento de posición de índice FlatList 0 como encabezado fijo y, como puede ver, ya hemos agregado el encabezado a FlatList , por lo que el encabezado ahora está en la posición de índice 0, por lo que de forma predeterminada hará el encabezado como pegajoso.
<FlatList data={ this.state.FlatListItems } ItemSeparatorComponent={ this.FlatListItemSeparator} renderItem={ ({item}) => ( <Text style={styles.FlatList_Item} onPress={this.GetItem.bind(this, item.key)}> {item.key} </Text> )} ListHeaderComponent={this.Render_FlatList_Sticky_header} stickyHeaderIndices={[0]} />0
stickyHeaderIndices={[0]} resolvería su problema.
<FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.id} stickyHeaderIndices={[0]} /> Además, stickyHeaderIndices también puede ser una matriz de los índices que queremos pegar. Incluso puede establecer muchos índices como este: FlatList Sticky Header Example
<FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={[0, 6, 13]} />Cuando siga desplazándose por FlatList, el elemento 0 será fijo y luego será reemplazado por el elemento 6, el elemento 13.
No puede encontrar stickyHeaderIndices en la documentación de RN FlatList. Pero puedes encontrarlo en el código fuente. VirtualizedList lo admite.