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

Question

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

Answer 1

为此，您可以将 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>

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

Answer 2

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

Answer 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>
        }
      />

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

How to render flat list horizontally and vertically?

react-native

react-native-flatlist