Question

我想显示数据，这样当值为偶数时，它会进入左列，当值为奇数时，它会进入右列。像这样：

这是我的代码

constructor(props) {
    this.state = {
      dataSource: [
        {id = 0}
        {id = 1},
        {id = 2},
        {id = 3},
      ],
    };
  }

  render() {
    return (
          <Content>
            <List
                refreshControl={
                <RefreshControl
                    refreshing={this.state.refreshing}
                    onRefresh={() => this._onRefresh()}
                />
                }
                enableEmptySections={true}
                dataArray={this.state.dataSource}
                renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}
                >
            </List>
          </Content>
    );
  }

  _renderRow(rowData, sectionID, rowID){
    return(
        <View style={{flex: 1, flexDirection: 'row'}}>
            <View>
                <Text>{id % 2 == 0}</Text>
            </View>
            <View>
                <Text>{id % 2 != 0}</Text>
            </View>
        </View>
    );
  }
}

Answer 1

作为一种解决方法你可以看看这个jsfiddle

renderList() {
    const {ids} = this.state;
    return ids.map((id) => (<div style={{width: '40%', border: '1px solid grey', padding: 10}}>{id}</div>));
  }

在你的渲染方法中，你可以为父div做一些样式。

<div style={{display:'flex', flexDirection: 'row', flexWrap: 'wrap', width: '100%'}}>
    {this.renderList()}
</div>

我知道这是ReactJS特定的代码。但是在React-Native

中可以使用相同的方法

如何在React-Native中创建不同的循环位置

1 个答案: