具有动态行和列的 react-native flatlist

Question

我正尝试在 react-native 应用程序中使用 FlatList 构建一个简单的布局，如下所示： example-image。我需要根据项目的索引创建一个动态布局，所以如果索引 ===0 第一张图像应该是宽的并且下面的列应该是连续的 2 个较小的图像，这是我的代码。

根据这个逻辑，我可以将第一个图像显示为宽图像，但其余图像显示不正确，我得到这样的结果 current layout宽图像下方的较小图像有一个空 space 接下来对它来说，如果我改变 index === 5 同样的事情发生，宽图像下方的列有一个点，另一个较小的图像应该在这个位置。我不知道为什么会发生这种情况以及如何解决它，我也在这里阅读了其他帖子。非常感谢任何建议和帮助。

<FlatList
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{
         alignSelf: 'center',
         alignItems: 'center',
         }}
         columnWrapperStyle={{flexWrap: 'wrap'}}
         data={layoutData}
         renderItem={({item, index}) =>
                    index === 0 ? (
                    <TouchableOpacity
                    style={styles.container}
                    <Image
                    style={styles.wideImg}
                    />
                    </TouchableOpacity>
              )  : (

                    <TouchableOpacity
                    style={styles.container}
                    <Image
                    style={styles.img}
                    />
                </TouchableOpacity>
              )
            }
            numColumns={2}
          />

Answer 1

因为你设置了numColumns={2}，这使得FlatList每两个项目渲染成一行。第一个大项目和第二个项目在同一行，第三个项目和第四个项目在新行中。所以第二项旁边会有一个位置。您可以将 numColumns 的长度设置为 layoutData 而不是 2.

    <FlatList
     showsVerticalScrollIndicator={false}
     contentContainerStyle={{
     alignSelf: 'center',
     alignItems: 'center',
     }}
     columnWrapperStyle={{flexWrap: 'wrap'}}
     data={layoutData}
     renderItem={({item, index}) =>
                index === 0 ? (
                <TouchableOpacity
                style={[styles.container, { width: '100%', height: 50, borderColor: 'white', borderWidth: 1 }]}
                >
                {/* <Image
                style={styles.wideImg}
                /> */}
                </TouchableOpacity>
          )  : (

                <TouchableOpacity
                style={[styles.container, { width: '50%', height: 50, borderColor: 'white', borderWidth: 1 }]}
                >
                {/* <Image
                style={styles.img}
                /> */}
            </TouchableOpacity>
          )
        }
        numColumns={layoutData.length}
      />

具有动态行和列的 react-native flatlist

react-native flatlist with dynamic rows and columns

wrapper

react-native

react-native-listview

react-native-flatlist

flatlist