如何水平和垂直渲染平面列表？答案

【问题标题】：How to render flat list horizontally and vertically?如何水平和垂直渲染平面列表？
【发布时间】：2020-03-13 09:35:21
【问题描述】：

我有一个 10x10 矩阵，我想将它呈现在一个平面列表中。如何在此启用垂直和水平滚动，以便用户可以从 10X10 矩阵中选择他们选择的项目。我只想让我的平面列表以两种方式滚动。

【问题讨论】：

分享您的代码和问题的屏幕截图。

标签： react-native react-native-flatlist

【解决方案1】：

请根据您要显示的列数在 flatlist numColumns={10} 中传递它，它将在 flatlist 中水平显示项目以网格格式（您不需要单独的滚动视图）

【讨论】：

谢谢哥们。您可以节省大量时间。再次非常感谢。
乐于助人。 :)

【解决方案2】：

为此，您可以将FlatList 嵌套在ScrollView 中，如下所示

<ScrollView>
  <View>
     <FlatList />
  </View>
</ScrollView>

要实现双向滚动行为，您可以像这样嵌套第二个ScrollView

<ScrollView
 horizontal
 bounces={false}
>
  <ScrollView
    nestedScrollEnabled
    bounces={false}
    contentContainerStyle={{ height: //the height of your inner content }}
   >
      <View>
        <FlatList />
      </View>
   </ScrollView>
 </ScrollView>

我还没有测试过，所以请务必问我任何问题。

【讨论】：

在滚动视图中包含 Flatlist 不是不好的做法吗？

【解决方案3】：

<FlatList
        data={data}
        numColumns={4}
        renderItem={({ item, index }) => (
          <View
            style={{
              padding: 20,
            }}
          >
            <Image
              source={{
                uri: item.uri,
              }}
              style={{ width: 64, height: 50 }}
            />
            <Txt.$Title
              style={{ fontSize: 10, paddingTop: 5, textAlign: "center" }}
            >
              {tr(item.name)}
            </Txt.$Title>
          </View>
        )}
        ItemSeparatorComponent={Kitten.Divider_________}
        ListEmptyComponent={
          <Txt.Indicator marginV>{tr("No trophy found")}</Txt.Indicator>
        }
      />

【讨论】：