1

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

App 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

1 respuesta 1

0

Al final lo resolví yo mismo con este código.

    handleLoadMore1() {
  let users=this.props.users
  let dt=[];
  console.log("handleLoad")
  if (users!=undefined && dt!=undefined){
  let  scol=2;
 for(let i=0;i<scol;i++){
  let randomUsers =users.sort(() => 0.5 - Math.random());
  randomUsers =randomUsers.slice(0,this.state.filas-1)
  while(randomUsers.length<this.state.filas-1){

    randomUsers.push(users[Math.floor(Math.random()*(size(users)-1))%(size(users))])
    
  }
  console.log("randomUsers:" +randomUsers)
 let n= this.state.data.length+dt.length;

 n= this.state.data.length+dt.length;
 dt.push({n:n ,data:randomUsers,length:randomUsers.length});
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.