Question

我正在尝试使用ListView组件创建一种表。我可以使用此代码

在listView中显示数据

constructor() { super(); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
     dataSource: ds.cloneWithRows(['row 1', 'row 2']),
      }; 
    }

  render() {
    const appData = this.props.appData;
    return (
      <View>
      <View style={styles.container}>
      <Text style={styles.title}> {I18n.t('appDetail.moreInformations')} </Text>
      </View>
      <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} />
      </View>
      )
    }
  }


  const styles = StyleSheet.create({
    container: {
      marginTop: 10,
    },
    title:{
    fontSize: 20,
    fontWeight: 'bold'
    },
    list:{
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent:'space-around',
        paddingTop: 10
    }

  });

但是我没有找到将每个项目放在其单元格左侧的解决方案。并且还要将每行的最大项数设置为两个。我的最终结果应该看起来像这张桌子（显然没有边框）

+------------------------------+-----------------------------+
| item 1.                      | item 2.                     |
+------------------------------+-----------------------------+
| item 3.                      | item 4                      |
+------------------------------+-----------------------------+
| item5                        | item 6                      |
+------------------------------+-----------------------------+

您对如何实现这一目标有所了解吗？

Answer 1

您可以使用FlatList并将numColumns={2}道具和style={{ flexDirection: 'column' }}设置为它。在我的情况下，我使用3个cols：FlatList with numColumns={3}：

 <FlatList
    style={{ flexDirection: 'column' }}             //<-- This Line
    numColumns={3}                                  //<-- And this one
    data={this.props.myList}
    keyExtractor={(item, index) => item.Id}
    renderItem={this.renderItem.bind(this)}
/>

Image: FlatList whit numColumns={3}

使用ListView创建表

1 个答案: