在列表视图中呈现两个项目（图像）在原生反应

Question

我试图在反应原生设计类似下面的截图。 请注意，每个tile是从后端获取的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', 
}, 

请提出一个更好的方式来做到这一点。

在此先感谢。

Answer 1

过去我们在生产过程中完成这项工作的一个好方法就是获得容器的宽度并将卡的宽度设置为宽度的50％，然后您可以将所有单个元素推入列表视图。此外，请务必设置wrap的flexWrap。

这将适用于所有设备尺寸，并且不需要额外的模块或库。

看看下面的示例代码和示例here：

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 
} 

Answer 2

阵营本地人，他的这个在他们CameraRollView.js例如一个很好的例子。他们使用名为groupByEveryN的库来允许您设置每行渲染多少项目。

通知的变化，你如何启动ListView.DataSource ...

var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); 
    this.state.dataSource = ds.cloneWithRows(
    groupByEveryN(this.state.assets, this.props.imagesPerRow) 
); 

你renderRow功能只需要期待的项目的数组...

// rowData is an array of images 
_renderRow: function(rowData: Array<Image>, sectionID: string, rowID: string) { 
    var images = rowData.map((image) => { 
    if (image === null) { 
     return null; 
    } 
    return this.props.renderImage(image); 
    }); 

    return (
    <View style={styles.row}> 
     {images} 
    </View> 
); 
} 

完整的示例文件位置：https://github.com/facebook/react-native/blob/a564af853f108e071e941ac08be4cde864f5bfae/Examples/UIExplorer/js/CameraRollView.js 。