React Native中的ListView网格

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

到目前为止,使用这里的优秀的例子 ,我设法得到的结果显示在行中使用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的使用。 这是样式对象:

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

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

截图

我将此作为答案添加,因为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', }, 

…和科林的回答一样。

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

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

按照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, }, }); 

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。 否则,你会得到一个警告。 基本扁平代码引发警告 – 反应原生

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

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