FlatList

  • Autor de la entrada:
  • Categoría de la entrada:React Native

Las FlatList son uno de los elementos mas usados en cualquier desarrollo móvil, ya sea Flutter, Ionic o React Native, nos permite mostrar de forma bonita y ordenada un conjunto de datos que podemos recorrer, hacer esto en React Native es sencillo  

import React,{Component} from ‘react’;
import { StyleSheet, Text, View, FlatList } from ‘react-native’;
import ListLayout from ‘./src/listLayout’

class holaLista extends Component{

constructor(props){
super(props);
this.state = {
misPeliculas:[
{name : ‘El Futuro’, key : ‘0’},
{name: ‘Es incierto 2’, key : ‘1’},
{name: ‘Llegaremos’, key : ‘2’}
]
}
}

separador = () =>{
return(
<View style={{
height:5,
width:»100%»,
backgroundColor:»black»,
marginVertical:10
}}>

</View>
)
}

render(){
return(
<FlatList
data={this.state.misPeliculas}
renderItem={ ({item}) => <ListLayout data={item} /> }
ItemSeparatorComponent = {this.separador}
ListEmptyComponent={<Text style={{marginTop:30}}>No hay elementos</Text>}
>
</FlatList>

)
}

}
export default holaLista

Luego creamos el componente listLayout

import React from ‘react’
import {View, Text} from ‘react-native’

function ListLayout(props){
return(
<View style={{marginTop:30}}>
<Text>{props.data.name}</Text>
</View>
)
}

export default ListLayout