React Native 0.87
Ejercicios de React Native sobre Listas
4 ejercicios de Listas en React Native. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Completa el hueco · nivel 1
Completa una FlatList de productos.
<FlatList ___={products} ___={({ item }) => <ProductRow product={item} />} keyExtractor={(item) => item.id}/>- data
- renderItem
- items
- render
- children
- map
Ver la respuesta
Respuesta: data · renderItem
<FlatList data={products} renderItem={({ item }) => <ProductRow product={item} />} keyExtractor={(item) => item.id}/>FlatList recibe el array en data y una función renderItem que pinta cada fila. Esa función recibe un objeto con item e index, por eso se desestructura { item }.
2 · Elige la respuesta · nivel 2
¿Para qué sirve onEndReached en una FlatList?
<FlatList data={posts} renderItem={renderPost} onEndReached={loadMore} onEndReachedThreshold={0.5} />- APara cargar más datos cuando el scroll se acerca al final
- BPara saber cuándo se ha pintado el último elemento por primera vez
- CPara volver arriba al llegar al final
- DPara avisar de que la lista está vacía
Ver la respuesta
Respuesta: A. Para cargar más datos cuando el scroll se acerca al final
onEndReached se dispara cuando el final del contenido queda a menos de onEndReachedThreshold (medido en pantallas) de la zona visible. Es la base del scroll infinito. Puede llamarse varias veces: controla que no haya una carga en curso.
3 · Encuentra el fallo · nivel 2
Las filas se mezclan y pierden su estado al actualizar la lista. ¿Qué línea tiene el fallo?
1<FlatList2 data={users}3 keyExtractor={() => "user"}4 renderItem={({ item }) => <UserRow user={item} />}5/>Ver la respuesta
El fallo está en la línea 3:
keyExtractor={() => "user"}keyExtractor tiene que devolver una clave única por elemento, por ejemplo (user) => user.id. Si todas son iguales, React no distingue unas filas de otras.
4 · Completa el hueco · nivel 2
Completa una cuadrícula de 3 columnas con un aviso cuando no haya fotos.
<FlatList data={photos} ___={3} renderItem={({ item }) => <Thumb uri={item.uri} />} ___={() => <Text>No hay fotos</Text>}/>- numColumns
- ListEmptyComponent
- columns
- EmptyComponent
- gridColumns
- ListFooterComponent
Ver la respuesta
Respuesta: numColumns · ListEmptyComponent
<FlatList data={photos} numColumns={3} renderItem={({ item }) => <Thumb uri={item.uri} />} ListEmptyComponent={() => <Text>No hay fotos</Text>}/>numColumns reparte los elementos en filas de n columnas sin perder la virtualización. ListEmptyComponent se muestra cuando data está vacío; ListHeaderComponent y ListFooterComponent van arriba y abajo.