Tengo este Flat List y en la consola veo que se cargan nuevos componenetes pero en la pantalla del mobil solo me muestra su espacio
Alguien me puede ayudar ver lo que estoy haciendo mal? Gracias
La idea es que se cargeuen unos hexagonos uno al lado del otro
Cuando cargo mas hexagonos el flat list no los carga y me queda un espacio vacio
Asi es como se ve la app y no se cargan nuevos hexagonos
//El consturctor
constructor(props) {
super(props);
const {users,isLoading } = props;
this.setData = this.setData.bind(this);
this.onEndReachedCalledDuringMomentum = true;
this.state = {
data: this.setData(this.props.users)
};
}
Aqui hago la introduccion de nuevos datos para el flat list //Set data setData = (data)=> { this.setState({data:data}) } componentWillReceiveProps(nextProps) { let users=nextProps.users const columnas=5; const filas=6; let n=0; let dt=[]; console.log("users2: "+users) while(n<columnas){
let randomUsers =users.sort(() => 0.5 - Math.random());
randomUsers =randomUsers.slice(0,filas-1)
console.log("n: "+n + "randomUsers:"+users)
dt.push({n:n ,data:randomUsers});
n++;
}
console.log("dt"+dt)
this.setState({ data:dt });
this.forceUpdate();
}
handleLoadMore2= ()=> {
/*
if(this.state.updating==false){
this.state.updating=true;
let dt=this.state.data;
let users=this.props.users
if (users!=undefined && dt!= undefined){
let filas=0
console.log("dt++"+dt)
let randomUsers =users.sort(() => 0.5 - Math.random());
for(let n=0;n<dt.length;n++){
let user=randomUsers[Math.floor(Math.random()*size(users)-1)%size(users)]
if(user!=undefined)
dt[n].data.push(user)
filas=dt[n].data.length;
console.log("dt****"+dt[n].data)
}
this.setState({ data:dt,filas:filas});
this.state.updating=false;
}
}*/
};
onEndReached = ({ distanceFromEnd }) => {
if(!this.onEndReachedCalledDuringMomentum){
this.handleLoadMore1();
this.onEndReachedCalledDuringMomentum = true;
}
}
handleLoadMore1() {
let users=this.props.users
let dt=[];
console.log("handleLoad")
if (users!=undefined && dt!=undefined){
const filas=this.state.filas;
let randomUsers =users.sort(() => 0.5 - Math.random());
randomUsers =randomUsers.slice(0,filas-1)
while(randomUsers.length<filas){
randomUsers.push(users[Math.floor(Math.random()*size(users)-1)%size(users)])
}
let n= this.state.data.length+dt.length;
console.log("n: "+n + "randomUsers2:"+users)
dt.push({n:n ,data:randomUsers,length:randomUsers.length});
n= this.state.data.length+dt.length;
console.log("n: "+n + "randomUsers2:"+users)
dt.push({n:n ,data:randomUsers,length:randomUsers.length});
n= this.state.data.length+dt.length;
console.log("n: "+n + "randomUsers2:"+users)
dt.push({n:n ,data:randomUsers,length:randomUsers.length});
n= this.state.data.length+dt.length;
console.log("n: "+n + "randomUsers2:"+users)
dt.push({n:n ,data:randomUsers,length:randomUsers.length});
this.setState({data:[...this.state.data,...dt ]}); //}
this.forceUpdate();
}
};
renderSecondFlatlist = ({item,index}) => {
return (
<FlatList style={item.n% 2==0 ? ({ overflow:'visible',position:'relative',marginLeft:-59,width: 235,height:'100%' }):({overflow:'visible',position:'relative',marginLeft:-59,top:-100, width: 235, height: "100%" })} vertical
extraData={this.state}
data={item.data}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
vertical
//onEndReachedThreshold={0}
// onEndReached={this.handleLoadMore2()}
/>
);
}
keyExtractor = (item, index) => {
return index.toString();
}
renderItem = ({item}) => {
// console.log("+++item:"+item.images)
return (
<HexagonProfile user={item} style={{ top: 100, left: 0, right: 0, bottom: 0,width: 235, height: 200 }}/>
);
}
shouldComponentUpdate(nextProps,nextState){
return true;
}
render() {
return (
<ScrollView>
<SafeAreaView >
<FlatList
extraData={this.state.data}
data={this.state.data}
keyExtractor={this.keyExtractor}
renderItem={this.renderSecondFlatlist
}
onEndReachedThreshold={0.5}
onEndReached={this.onEndReached.bind(this)}
onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
horizontal={true}
horizontal
/>
</SafeAreaView>
</ScrollView>
)
}
}
Gracias