在ListView的网格本土作出反应 [英] ListView grid in React Native

问题描述

我在建设本地做出反应一个简单的应用程序，获取从远程JSON源代码列表，并将其显示在屏幕上。

I'm building a simple app in React Native that fetches listings from a remote JSON source and displays them on screen.

到目前为止，使用优良<一href=\"http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript\">example在这里，我已经成功地得到结果使用行ListView控件组件来显示（即每行1的结果，见截图）。我所需要的结果在网格中显示，即每行3至6项，根据屏幕尺寸和方向。

So far, using the excellent example here, I've managed to get the results to display using the ListView components in rows (i.e. 1 result per row, see screenshot). I need the results to display in a grid, i.e. 3 to 6 items per row, depending on the screen size and orientation.

什么是让这些结果到网格的最佳方式？我可以使用的ListView这一点，或者是只有一个，每行的结果吗？我试着玩弄Flexbox的款式，但是，因为作出反应似乎并不接受％的值和ListView不接受的风格，我还没有过任何成功。

What is the best way to get these results into a grid? Can I use ListView for this, or is that only for one-per-row results? I've tried playing around with flexbox styles but, since React doesn't seem to accept % values and ListView doesn't accept styles, I haven't yet had any success.

推荐答案

您需要使用的 Flexbox的，这ListView的包装滚动型等知识呈现其属性。考虑到这一点，你可以使用滚动型的 contentContainerStyle 道具样式的项目。

You need to use a combination of flexbox, and the knowledge that ListView wraps ScrollView and so takes on its properties. With that in mind you can use the ScrollView's contentContainerStyle prop to style the items.

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 的。这里的样式对象：

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

我们告诉我们要在连续包装物品的容器，和我们设定的每个子对象的宽度。

We tell the container we want items in a wrapping row, and the we set the width of each child object.

这篇关于在ListView的网格本土作出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！