React Native中的ListView网格

作者: 记忆只剩空城
发布时间: 2024-12-30 01:17:10 (2月前)
转自：

9 条回复

0#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我有同样的问题，我写了一个解决这个问题的组件，你可以在这里找到它： <a href="https://github.com/pavlelekic/react-native-gridview" rel="noreferrer"> https://github.com/pavlelekic/react-native-gridview </A> </p> <P> 此外，该组件所做的另一件事是它确保项目宽度是一个整数，因此项目的边框没有抗锯齿，它们清晰明快。 </p> </DIV>

编辑
1#
回复此人
一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 关注Colin Ramsay的回答。如果你想要每个项目的半宽，试试这种方式。 </p> <pre> <code> ... 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, }, }); </code> </pre> </DIV>

编辑
2#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你需要结合使用 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes"> Flexbox的 </A> ，以及ListView包装ScrollView的知识，因此具有其属性。考虑到这一点，您可以使用ScrollView <code> contentContainerStyle </code> 支撑物品的样式。 </p> <pre> <code> 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>} /> ); } }); </code> </pre> <P> 只是一个带有一些虚拟数据的ListView。注意使用 <code> contentContainerStyle </code> 。这是样式对象： </p> <pre> <code> var styles = StyleSheet.create({ list: { flexDirection: 'row', flexWrap: 'wrap' }, item: { backgroundColor: 'red', margin: 3, width: 100 } }); </code> </pre> <P> 我们告诉容器我们想要包装行中的项目，我们设置每个子对象的宽度。 </p> <P> <img src =“https://i.stack.imgur.com/VvXjL.png”alt =“截图”/> </p> </DIV>

编辑
3#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用检查以下示例的<strong> FlatList </强> 的组成部分的<strong> 反应原生 </强> 支持无限滚动，具有出色的性能： </p> <pre> <code> //Resize the grid onLayout = (event) => { const {width} = event.nativeEvent.layout; const itemWidth = 150 const numColumns = Math.floor(width/itemWidth) this.setState({ numColumns: numColumns }) } render() { return ( <Content contentContainerStyle={{flex:1, alignItems: 'center'}} onLayout={this.onLayout}> <FlatList data={this.state.products} keyExtractor={(item, index) => index} key={this.state.numColumns} numColumns={this.state.numColumns} renderItem={({item}) => <ListThumb //Custom component, it's only an example. navigation={navigation} brand={item.brand} price={item.price} imageSource={item.image_link}/> } /> </Content> ) } </code> </pre> <P> 这个例子看起来像 </p> <P> <a href="https://i.stack.imgur.com/45fC8.jpg" rel="nofollow noreferrer"> <img src =“https://i.stack.imgur.com/45fC8.jpg”alt =“在此处输入图片说明”/> </A> </p> <P> 最好的问候，Nicholls </p> </DIV>

编辑
4#
回复此人
那年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我添加这个作为答案，因为溢出的评论隐藏在Colin Ramsay的回复中：从React Native 0.28开始，你还需要 <code> alignItems: 'flex-start', </code> 在listview样式或flexWrap将无法正常工作。感谢codump.io上的Kerumen。所以， </p> <pre> <code> var styles = StyleSheet.create({ list: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start', }, </code> </pre> <P> ......其余的和科林的回答一样。 </p> </DIV>

编辑
5#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> ListView现在 <a href="https://facebook.github.io/react-native/docs/listview.html" rel="noreferrer"> 弃用 </A> 你应该使用 <a href="https://facebook.github.io/react-native/docs/flatlist.html" rel="noreferrer"> FlatList </A> 代替。 FlatList有一个名为的道具 <code> numColumns </code> 这正是我们想要创建可滚动网格的原因。 </p> <P> 例如： </p> <pre> <code> 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} /> ); } </code> </pre> <P> <a href="https://i.stack.imgur.com/kjzXa.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/kjzXa.png”alt =“在此处输入图片说明”/> </A> </p> <P> 这个 <a href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html" rel="noreferrer"> 博客文章 </A> 很好地解释了FlatList的新功能。 </p> <P> 注意：出于某种原因，您必须使用 <code> keyExtractor </code> 在FlatList上而不是典型的 <code> key </code> 每个项目的道具。否则你会收到警告。 <a href="https://stackoverflow.com/questions/44545148/basic-flatlist-code-throws-warning-react-native"> 基本FlatList代码抛出警告 - React Native </A> </p> </DIV>

编辑
6#
回复此人
那月静好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在反应原生中使用FlatList而不是Listview。它具有更多的增值功能和更好的性能。 <a href="https://facebook.github.io/react-native/docs/flatlist.html" rel="nofollow noreferrer"> 在这里查看示例 </A> </p> </DIV>

编辑
7#
回复此人
夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用FlatList并设置numColumns来获取与grid相同的结果 </p> </DIV>

编辑

登录后才能参与评论