React Native中的ListView网格

我在React Native中构建一个简单的应用程序，从远程JSON源获取列表，并在屏幕上显示它们。

到目前为止，使用优秀的example这里，我设法得到结果显示使用ListView组件在行(即每行1个结果，见屏幕截图)。我需要结果以网格显示，即每行3到6个项目，这取决于屏幕大小和方向。

将这些结果转换为网格的最好方法是什么？我可以使用ListView为此，还是只有一行一行结果？我试着玩flexBox样式，但是，因为React似乎不接受％值和ListView不接受样式，我还没有取得任何成功。

你需要使用 flexbox的组合，知道ListView包装ScrollView等，所以它的属性。考虑到这一点，你可以使用ScrollView的contentContainerStyle prop来设置项目的样式。

var TestCmp = React.createClass({
    getinitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});
      var data = Array.apply(null,{length: 20}).map(Number.call,Number);
      return {
        dataSource: ds.cloneWithRows(data),};
    },render: function() {
      return (
        <ListView contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
        />
      );
    }
});

只是一个ListView与一些虚拟数据。注意使用contentContainerStyle。这里是style对象：

var styles = StyleSheet.create({
    list: {
        flexDirection: 'row',flexWrap: 'wrap'
    },item: {
        backgroundColor: 'red',margin: 3,width: 100
    }
});

我们告诉容器我们想要一个包装行中的项目，并且我们设置每个子对象的宽度。

React Native中的ListView网格

相关文章