ネイティブレンダリングコンポーネントを反応させる代わりに、状態を使用して

Question

グリッド内の2つの列にリストを交互に表示したいとします。私はコンポーネントの状態でフラ​​グ変数を使用し、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()メソッドにパラメータを渡すと、リスト内の他のすべてのアルバムを選択するためにそれを使用します。

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

は、その後、あなたのrender()方法で：

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>