react-native - 在 react native 的 ListView 中并排渲染两个项目(图像)

Question

我正在尝试在 native react 中设计类似于以下屏幕截图的内容。
请注意，每个图 block 都是从后端获取的 Product 元素。



但是我无法使用 ListView 及其 renderRow 方法来做到这一点，这拒绝我使用任何类型的 InfiniteScroll 组件。

目前，我一次运行一个包含 2 个元素的循环，并在 ScrollView 中渲染 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 样式如下所示:

view: {
  flex: 1,
  flexDirection: 'row',
},

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

提前致谢。

Answer 1

过去我们在生产中这样做的一个好方法，并且效果很好，就是获取容器的宽度并将卡片的宽度设置为宽度的 50%，然后您可以将所有单个元素进入 ListView 。另外，请务必设置 flexWrap的 wrap .

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

查看下面的示例代码和示例 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
}