reactjs - React Native - 如何构建像 Facebook 一样的图像网格

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 6 年前。

Improve this 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