Agregar separadores de elementos y encabezados a FlatList

 En este tutorial, veremos cómo podemos personalizar nuestro FlatListcomponente en nuestra aplicación React Native usando un encabezado y separadores de elementos.

El FlatListcomponente le permite agregar y personalizar el encabezado de la lista y los separadores de elementos usando los accesorios ListHeaderComponenty ItemSeparatorComponent.

Comencemos con el componente separador de elementos. En el App.jsarchivo, agregue el siguiente código:

FlatListItemSeparator = () => {
  return (
    <View
      style={{
        height: 1,
        width: "100%",
        backgroundColor: "#000",
      }}
    />
  );
}

Simplemente usamos un Viewcomponente 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.jsarchivo:

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 Viewcon Textcomponentes. Hemos utilizado el styleaccesorio para cada componente para agregar un montón de estilos en línea, particularmente las propiedades de sombra para agregar algunas sombras al Viewcontenedor y al Textcomponente.

Puede hacer uso de este generador de sombras React Native en línea para generar los estilos de sombra.

Ahora, vamos a cambiar nuestro FlatListcomponente mediante la adición de las ListHeaderComponenty ItemSeparatorComponentlos 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 FlastListelemento. 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.