En este tutorial, veremos cómo podemos personalizar nuestro FlatList
componente en nuestra aplicación React Native usando un encabezado y separadores de elementos.
El FlatList
componente le permite agregar y personalizar el encabezado de la lista y los separadores de elementos usando los accesorios ListHeaderComponent
y ItemSeparatorComponent
.
Comencemos con el componente separador de elementos. En el App.js
archivo, agregue el siguiente código:
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
Simplemente usamos un View
componente para nuestro separador con una altura de 1
, un 100%
ancho y un color de fondo negro. Esto generará una línea negra horizontal que ocupa todo el ancho de la lista.
A continuación, agreguemos un componente de encabezado en el mismo App.js
archivo:
FlatListHeader = () => {
return (
<View elevation={1}
style={{
height: 100,
width: "97%",
margin: 5,
backgroundColor: "#fff",
border: 2.9,
borderColor: "black",
alignSelf: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 16,
},
shadowOpacity: 1,
shadowRadius: 7.49
}}
>
<Text style={{ textShadowColor: 'black', textShadowOffset: { width: 1, height: 3 },textShadowRadius: 10, fontSize: 40, fontWeight: '800', flex: 1, alignSelf: "center", paddingTop: 30, fontSize: 40}}>Latest articles</Text>
</View>
);
}
Para el encabezado, usamos un View
con Text
componentes. Hemos utilizado el style
accesorio para cada componente para agregar un montón de estilos en línea, particularmente las propiedades de sombra para agregar algunas sombras al View
contenedor y al Text
componente.
Puede hacer uso de este generador de sombras React Native en línea para generar los estilos de sombra.
Ahora, vamos a cambiar nuestro FlatList
componente mediante la adición de las ListHeaderComponent
y ItemSeparatorComponent
los apoyos y la asignación de los componentes anteriores:
const HomeScreen = (props) => {
console.log("articles: ", props.articles);
return (
<View>
<FlatList
data={ props.articles }
ListHeaderComponent = { this.FlatListHeader }
ItemSeparatorComponent = { this.FlatListItemSeparator }
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => <ArticleItem article = { item } />}
/>
</View>
);
}
Esta es una captura de pantalla de nuestra interfaz de usuario con un encabezado de lista, separadores de elementos y una sombra alrededor del encabezado:
Tenemos una interfaz de usuario mucho mejor incluso con esta pequeña personalización.
En la siguiente parte, implementaremos la funcionalidad de los botones abrir y guardar adjuntos a cada FlastList
elemento. Podremos abrir la URL de cada artículo en un navegador web o guardar el artículo usando el almacenamiento local para leerlo más tarde.
0 Comentarios
Dejanos tu comentario para seguir mejorando!