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

也许稍微改变你的方法并同时渲染两个列。因此，您可以在要呈现的列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>

Answer 2

在这种情况下，我认为你不需要改变状态。只需将参数传递给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>
  );
}

此代码尚未经过测试，但应该可以使用。

反应本机渲染组件或者使用状态

2 个答案: