React Native：大小由文本高度定义的 FlatList 标题有时不会完全显示

Question

我有一个在renderHeader函数中定义了标头的平面列表，它表现出奇怪的跳跃行为或根本不会显示，这可以通过重新加载平面列表来修复。只有当我没有给标题一个明确的高度，而是使用文本大小+填充作为高度时，才会出现这个问题(如代码片段所示(。将ListHeaderComponentStyle道具上的flex值设置为1将修复不显示的跳跃性/文本，但在加载时会导致更多问题。有人对如何解决这个问题有什么想法吗？

参考代码：

<FlatList
ListHeaderComponent={renderHeader}
data={retrieveItems()}
keyboardShouldPersistTaps="always"
contentContainerStyle={{flexgrow: 1}}
showsVerticalScrollIndicator={false}
scrollEventThrottle={55}
renderItem={({ item, index }) => renderItems(item, index)}
keyExtractor={(item) => `${item.id}`}
ListEmptyComponent={renderNoItems}
/>

const renderHeader = () => (
<View style={{flex: 1}}>
<View style={{justifyContent: "center",
alignItems: "stretch",
margin: 0 -20}}>
<View style={{flex: 1,
flexDirection: "row",
alignItems: "center",
margin 0 20}}>
<View style={{padding: 10 50, alignSelf: "center"}}>
<Text>sample text</Text>
</View>
</View>
</View>
///<View/ > another unrelated view in header
</View>
);

Answer 1

好的，问题是需要删除视图上的flex:1样式。这样做之后效果很好。