我正在尝试设计类似下面的屏幕截图in react native.
请注意,每个磁贴都是从后端获取的Product元素.
请注意,每个磁贴都是从后端获取的Product元素.
但我无法使用ListView及其renderRow方法执行此操作,该方法拒绝使用任何类型的InfiniteScroll组件.
目前我正在运行一个包含2个元素的循环,并在滚动视图中渲染2个元素.以下是我的代码解释更好.
render() {
var elem = [];
for(var i = 0; i < this.state.products.length; i+=2) {
var prod = this.state.products[i];
var prod2 = this.state.products[i + 1];
elem.push(
<View style={styles.view} key={i} >
<ProductTile onPressAction={this._pdpPage} prod={prod} index={i} />
<ProductTile onPressAction={this._pdpPage} prod={prod2} index={i + 1} />
</View>
);
}
return (
<ScrollView>
{elem}
</ScrollView>
)
}
然后基于索引prop我将左侧或右侧的元素对齐.
我的视图样式如下所示：
view: {
flex: 1,flexDirection: 'row',},
请建议一个更好的方法来做到这一点.
提前致谢.
我们过去在生产中做到这一点的一个好方法,它已经很好,是为了获得容器的宽度,并将卡的宽度设置为宽度的50％,然后你可以推动所有的单个元素进入listview.此外,请务必设置flexWrap包装.
原文链接：https://www.f2er.com/react/300957.html这将适用于所有设备大小,并且不需要额外的模块或库.
https://rnplay.org/apps/t_6-Ag
/* Get width of window */
const width = Dimensions.get('window').width
/* ListView */
<ListView
contentContainerStyle={styles.listView}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
/* Row */
renderRow () {
return <View style={styles.card}>
<Text>{rowData.name} {rowData.price}</Text>
</View>
/* Styles */
listView: {
flexDirection: 'row',flexWrap: 'wrap'
},card: {
backgroundColor: 'red',width: (width / 2) - 15,height: 300,marginLeft: 10,marginTop: 10
}
