React Native中的ListView网格
我正在用React Native构建一个简单的应用程序，它从远程JSON源获取列表并将它们显示在屏幕上。
到目前为止，使用这里优秀的example，我已经设法使用ListView组件以行的形式显示结果(即每行1个结果，请参见屏幕截图)。我需要将结果显示在网格中，即每行3到6个项目，这取决于屏幕大小和方向。
将这些结果放入网格的最佳方法是什么？我可以使用ListView来实现这一点吗，或者这只适用于每行一次的结果？我尝试过使用flexbox样式，但由于React似乎不接受%值，而ListView也不接受样式，所以我还没有成功。
回答 7
Stack Overflow用户
发布于 2015-04-02 00:10:25
您需要结合使用flexbox和ListView包装ScrollView并采用其属性的知识。考虑到这一点，您可以使用ScrollView的contentContainerStyle属性来设置项目的样式。
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
}
});我们告诉容器我们想要包装行中的项，并设置子对象的宽度。
Stack Overflow用户
发布于 2017-09-22 23:49:16
ListView现在是deprecated，您应该改用FlatList。FlatList有一个名为numColumns的属性，这正是我们想要创建的可滚动网格。
例如：
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} />
);
}
这个blog post很好地解释了FlatList的新特性。
注意:由于某些原因，您必须在FlatList上使用keyExtractor，而不是在每个项目上使用典型的key属性。否则，您将收到警告。Basic FlatList code throws Warning - React Native
Stack Overflow用户
发布于 2016-10-04 12:18:31
我之所以添加这个作为答案，是因为溢出注释隐藏在Colin Ramsay的response下面:从React Native 0.28开始，您还需要在列表视图样式中使用alignItems: 'flex-start',，否则flexWrap将无法工作。这要感谢codedump.io上的Kerumen。所以,
var styles = StyleSheet.create({
list: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
},在科林的回答中，...with其余部分。
https://stackoverflow.com/questions/29394297
复制相似问题