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

Question

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

这是一个零食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',
},
});

工作示例

Answer 2

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

Answer 3

我不是很好与反应原生，我也不能实际上看到你的问题，但你提到它是在容器。我看了一下你的代码，我知道在正常的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%时，你必须小心额外的填充/边框等。