네이티브 렌더링 구성 요소를 리플렉션 또는 상태를 사용하여

Question

그리드에서 두 개의 열로 목록을 번갈아 렌더링하고 싶습니다. 내 구성 요소 상태에서 플래그 변수를 사용하여 이렇게 할 계획이고 CardDetail을 반환 할 때마다 값을 변경합니다.

의도 한대로 작동하지 않는 것 같아서 this.changeState() 문을 주석 처리했습니다.

제 생각에는 도움이되지 않습니다. 본인은 React/React Native를 처음 사용합니다. 미리 감사드립니다.

renderAlbums() { 
    return this.state.albums.map(album =>{ 
     this.rend2(album) 
    } 
    ); 
    } 
rend2(album){ 
if(this.state.flag === 0) 
{ 
    //this.changeState(); 
    return (<CardDetail key={album.title} album={album} />); 
} 
else 
{ 
//this.changeState; 
return (<View />); 
} 
} 

changeState(){ 
    if(this.state.flag === 0) 
{ 
this.setState({flag:1}); 
} 
else 
{ 
    this.setState({flag:0}) 
} 
} 

    render() { 
    console.log(this.state); 

    return (

     <ScrollView> 
     <Grid> 
     <Col>{this.renderAlbums()}</Col> 
     <Col>{this.renderAlbums()}</Col> 

     </Grid> 
     </ScrollView> 
    ); 
    } 
} 

Answer 1

이 경우 상태를 변경하지 않아도됩니다. 그냥 renderAlbums() 메서드에 매개 변수를 전달하고 목록에있는 다른 모든 앨범을 선택하는 데 사용할 : 당신의 render() 방법 그리고

renderAlbums(col) { 
    return this.state.albums.map((album, index) => { 
    if (index % 2 == col) 
     return (<CardDetail key={album.title} album={album} />); 
    else 
     return (<View/>); 
    }); 
} 

:이 코드는 테스트되지 않았습니다

render() { 
    return (
    <ScrollView> 
     <Grid> 
     <Col>{this.renderAlbums(0)}</Col> 
     <Col>{this.renderAlbums(1)}</Col> 
     </Grid> 
    </ScrollView> 
); 
} 

를하지만해야 작업.

Answer 2

어프로치를 약간 변경하고 두 열을 동시에 렌더링 할 수 있습니다. 그러면 어떤 열을 CardDetail으로 렌더링 할 것인지를 전환 할 수 있습니다.

return (
    <ScrollView> 
    <Grid> 
     {this.state.albums.map((album, index) => 
     <View key={index}> 
      <Col>{index % 2 === 0 
      ? <CardDetail key={album.title} album={album} /> 
      : <View /> 
      }</Col> 

      <Col>{index % 2 !== 0 
      ? <CardDetail key={album.title} album={album} /> 
      : <View /> 
      }</Col> 
     </View> 
     } 
    </Grid> 
    </ScrollView>