频道导航

react-native – 在列表视图中并排渲染两个项目(图像)

2020-06-27 React 前端之家

前端之家收集整理的这篇文章主要介绍了react-native – 在列表视图中并排渲染两个项目(图像)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_502_0@ 我正在尝试设计类似下面的屏幕截图in react native.
请注意,每个磁贴都是从后端获取的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包装.

这将适用于所有设备大小,并且不需要额外的模块或库.

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