在本地反应列表视图中并排渲染两个项目(图像)

Question

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

然后基于索引道具我将左侧或右侧的元素对齐.我的视图样式如下所示:

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

请建议一个更好的方法来做到这一点.

提前致谢.

Answer 1

我们过去在生产中做到这一点的一个好方法,它已经很好,是为了获得容器的宽度,并将卡的宽度设置为宽度的50%,然后你可以推动所有的单个元素进入列表视图.此外,一定要建立一个flexWrap的wrap.

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

看看下面的示例代码和例子在这里:

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

React Native在他们的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.