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以获取与网格相同的结果
- 使ListView.ScrollIntoView将项目滚动到ListView(C#)的中心
- Androidcheckboxlistview全选(禁用/启用)
- 更改Android上ListView项目的背景颜色
- Android,ListView IllegalStateException:“适配器的内容已经改变,但ListView没有收到通知”
- ListView单击以在ImageView中显示图像
- Android ListView与onClick项目
- android.content.res.Resources $ NotFoundException:string资源ID#0x0
- Android ListView,每行有不同的布局
- Android ListView的填充内容而不移动ListView的高度?