Question

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

简而言之，我想创建一个react-native版本 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中设置图像网格边距。

完整示例here

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

1 个答案: