FlatList内容超出容器:如何制作固定高度的FlatList

Question

我有一台<FlatList />。在这个<FlatList />中，我有另一个<FlatList />。嵌套的<FlatList />给了我一些奇怪的行为。它超出了容器的边界。正如您所看到的，标志正在越过代表<FlatList />边界的yellow框。

这是一个重现这个问题的点心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

我对react native不是很在行，我也不能真正看到你的问题，但是你提到它是在容器上。我看过你的代码，我知道在普通的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溢出它的容器。在那里，你还需要做width: calc(100% - 16)。

如果你有borderWidth: 2而没有box-sizing: border-box，这将变得更加令人困惑，这将导致它在容器的宽度上增加4倍。

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

Answer 3

考虑到丹和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>
      )}
    />
  );