React Native - 如何构建像 FaceBook 这样的图像网格

Question

我希望使用React Native创建一个应用程序，并且需要像Facebook活动照片一样排列和显示图像列表。

简而言之，我想创建 反应原生版本https://taras-d.github.io/images-grid/

有谁知道提供类似东西的 RN 组件？

Answer 1

您可以通过为每个图像设置宽度高度并将其呈现为一行来自己创建图像网格。

例如，您希望 1 行包含 3 张图像。您可以使用尺寸来获取窗口宽度并将除以 3。

const windowWidth = Dimensions.get('window').width;
var IMAGES_PER_ROW = 3;
calculatedSize(){
  var size = windowWidth / IMAGES_PER_ROW
  return {width: size, height: size}
}

之后，我们将连续渲染图像。

renderRow(images) {
    return images.map((uri,i) =>{
      return(
        <Image key={i} style={[styles.item, this.calculatedSize()]} source={{uri: uri}} />
      );
    })
  }
  renderImagesInGroupsOf(count) {
    return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow,i) => {
      return (
        <View style={styles.row} key={i}>
          {this.renderRow(imagesForRow)}
        </View>
      )
    })
  }

您可以根据需要设置图像网格边距styles.item例如margin: 1。

完整示例在这里