FlatList 的内容超出了它的容器：How to make FlatList with fixed height

Question

我有一个<FlatList />。在这个<FlatList /> 中，我还有另一个<FlatList />。嵌套的<FlatList /> 给了我一些奇怪的行为。它超出了其容器的边距。如您所见，Flags 越过yellow 框，它代表<FlatList /> 的边界。

这里有一个 Snack https://snack.expo.dev/@stophfacee/nested-flatlist，它重现了这个问题。

请注意：动画（触摸hotpink 矩形时）无法正常工作。我不确定为什么。但是，我仍然包含它，因为我不确定这是否是问题所在。

Answer 1

这可能是您想要的结果。请检查一次！

import React, { useState } from 'react';
import {
  View,
  StyleSheet,
  Animated,
  Dimensions,
  TouchableOpacity,
  Text,
  ScrollView,
} from 'react-native';
import Constants from 'expo-constants';
import CountryFlag from 'react-native-country-flag';
import { FlatList } from 'react-native-gesture-handler';

export default function App() {
  const _renderFlag = (country) => {
    return (
      <TouchableOpacity onPress={() => console.log('Flag touched')}>
        <CountryFlag
          isoCode={'NZ'}
          size={50}
          style={{ alignSelf: 'flex-end' }}
        />
      </TouchableOpacity>
    );
  };

  const _createCard = (card, index) => {
    return (
      <View style={styles.card} key={index}>
        <TouchableOpacity
          style={styles.touchable}
          onPress={() => console.log('toggle')}>
          <Text>{card}</Text>
        </TouchableOpacity>
        <View style={{ height: 200 }}>
          <FlatList
            nestedScrollEnabled={true}
            style={{ marginTop: 20, backgroundColor: 'yellow' }}
            columnWrapperStyle={{
              justifyContent: 'space-around',
            }}
            ItemSeparatorComponent={() => <View style={{ margin: 10 }}/>}
            numColumns={3}
            data={[
              1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
            ]}
            renderItem={_renderFlag}
            keyExtractor={(item, index) => index.toString()}
            getItemLayout={(data, index) => ({
              length: 50,
              offset: 50 * index,
              index,
            })}
          />
        </View>
      </View>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        style={{ margin: 20 }}
        data={['a', 'b', 'c']}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => _createCard(item, index)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderColor: 'red',
    borderWidth: 2,
    padding: 8,
    marginBottom: 15,
  },
  touchable: {
    backgroundColor: 'hotpink',
    height: 50,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Working Example

Answer 2

我对本机反应不是很好，我也看不到您的问题，但是您提到它正在遍历容器。我看了你的代码，我知道在普通的 css/web 中你的样式不起作用。

您有一个<FlatList，并且为style={styles.container} 指定了一个样式。该容器的样式是：

container: {
  paddingTop: 50,
  height: '100%',
  widht: '100%',
}

你告诉容器是height: 100%，然后你还告诉它有一个50的填充。这将导致总高度为100% + 50。为了解决这个问题，你应该将height: calc(100% - 50) 与您的填充一起使用，它会非常适合。

我不知道这是否是您的实际问题，但我不知道这将如何工作，除非 react native 正在使用填充做一些古怪的事情。

实际上，您在几个地方也这样做了，在您的卡上，您使用了width: '90%' 和padding: 8，因此该卡将溢出其容器中的 6。您还需要这样做@987654328 @。

如果你有 borderWidth: 2 而你没有 box-sizing: border-box 这将变得更加混乱，这将导致它比容器的宽度多 4 倍。

当您指定它的宽度/高度为 100% 时，您必须小心添加的额外填充/边框/等。

Answer 3

考虑到 Dan 和 AmerllicA 的建议，这是 SectionList 的一种可能用法，似乎可以解决您的问题：

别忘了从react-native 导入SectionList！

 const sections = [
    { title: 'Section 1', data: ['a', 'b', 'c'].map((card, index) => _createCard(card, index)) },
    { title: 'Section 2', data: ['a', 'b', 'c'].map((card, index) => _createCard(card, index)) },
    { title: 'Section 3', data: ['a', 'b', 'c'].map((card, index) => _createCard(card, index)) },
  ];

  return (
    <SectionList
      initialNumToRender={2}
      contentContainerStyle={{ alignItems: 'center' }}
      style={styles.container}
      sections={sections}
      renderItem={(item) => {
        return item.item;
      }}
      renderSectionHeader={({ section: { title } }) => (
        <View style={{ backgroundColor: 'pink', width:200,  alignItems: 'center', justifyContent: 'center', height: 50 }}>
          <Text>{title}</Text>
        </View>
      )}
    />
  );