React Native中的ListView网格

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

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

将这些结果放入网格的最佳方法是什么？ 我可以为此使用ListView，还是只为每行结果？ 我尝试过使用flexbox样式，但由于React似乎不接受％值，而ListView不接受样式，所以我还没有成功。

Answer 1

您需要使用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的使用。 这是样式对象：

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

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

Answer 2

我将此作为答案添加，因为Colin Ramsay的回应中隐藏了溢出注释：从React Native 0.28开始，您还需要alignItems: 'flex-start',在listview样式中或flexWrap将不起作用。 感谢Kerumen在这方面的codesump.io。 所以，

 var styles = StyleSheet.create({ list: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start', }, 

…和科林的回答一样。

Answer 3

我有同样的问题，我写了一个解决这个问题的组件，你可以在这里find它： https ： //github.com/pavlelekic/react-native-gridview

另外，这个组件做的另外一件事情是确保项目的宽度是一个整数，这样项目的边界就不会有反锯齿，它们是清晰明快的。

Answer 4

按照Colin Ramsay的回答。 如果你想要每个项目的半宽，试试这个方法。

 ... import { Dimensions } from 'react-native'; const { width, height } = Dimensions.get('window'); const gutter = 0; // You can add gutter if you want ... const styles = StyleSheet.create({ item: { width: (width - gutter * 3)/2, marginBottom: gutter, flexDirection: 'column', alignSelf: 'flex-start', backgroundColor: '#ff0000', }, list: { flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap', paddingHorizontal: gutter, }, }); 

Answer 5

ListView现在已被弃用 ，您应该使用FlatList来代替。 FlatList有一个名为numColumns的道具，正是我们想要创build一个可滚动的网格。

例如：

 const data = [ {id: 'a', value: 'A'}, {id: 'b', value: 'B'}, {id: 'c', value: 'C'}, {id: 'd', value: 'D'}, {id: 'e', value: 'E'}, {id: 'f', value: 'F'}, ]; const numColumns = 3; const size = Dimensions.get('window').width/numColumns; const styles = StyleSheet.create({ itemContainer: { width: size, height: size, }, item: { flex: 1, margin: 3, backgroundColor: 'lightblue', } }); function Grid(props) { return ( <FlatList data={data} renderItem={({item}) => ( <View style={styles.itemContainer}> <Text style={styles.item}>{item.value}</Text> </View> )} keyExtractor={item => item.id} numColumns={numColumns} /> ); } 

这篇博文很好地解释了FlatList的新function。

注意：出于某种原因，您必须在keyExtractor上使用keyExtractor ，而不是在每个项目上使用典型的key prop。 否则，你会得到一个警告。 基本扁平代码引发警告 – 反应原生

Answer 6

在react-native中使用FlatList而不是Listview。 它具有更多的增值function和更好的性能。 结帐在这里的例子

Answer 7

您可以使用FlatList并设置numColumns以获取与网格相同的结果