React-native FlatList 项目没有达到正确的高度

Question

我在 FlatList 中有不同高度（250 或 150）的项目，当迭代每个项目并为 FlatList 附加 dataSrouce 的状态时，一切都呈现正常，但是如果我想避免 "appending" 影响并立即将 dataSrouce 设置为所有项目，FlatList 似乎有一个奇怪的错误项目未获得正确高度的地方（项目应该填充的底部有一个空白 space）。

尝试将“flexGrow:1”放在 FlatList 上，尝试了“initialNumToRender”属性，试图修复视图中每个项目的高度。

FlatList 的容器是 "flex:1"。

我的平面列表：

  render() {
const _this = this;
const { loading } = this.state;
return (
  <Components.ViewContainer>
    {this.printTopHeader()}
    {loading ? (
      <ActivityIndicator size={25} />
    ) : (
      <FlatList
        style={{ flex: 1 }}
        removeClippedSubviews={true} //tried with and without
        data={this.state.posts}
        extraData={this.state.posts} //tried with and without
        renderItem={({ item }) => (
          <HomeCard
            post={item}
          />
        )}
        keyExtractor={(item, index) => item.key}
      />
    )}
  </Components.ViewContainer>
);

}

Components.ViewContainer:

const ViewContainer = styled.View`
flex:1;
`;

家庭名片：

  render() {
    const { theme, showActions } = this.props;
    const {
      imageUrl,
      user,
      title,
      selectedPlace,
      textColor,
      backgroundColor
    } = this.props.post;

    return (
      <Components.ContainerView>
...
 </Components.ContainerView>
    );
}
export default withTheme(HomeCard); // styled-components implementation

Answer 1

这个问题是由应用到子元素的错误样式引起的，通过更好地理解 FlexBox 的工作原理，我发现我在列表元素上缺少 flex: 1 属性，因此项目样式计算不正确。

React-native FlatList 项目没有达到正确的高度

React-native FlatList items not get to right height

reactjs

react-native

react-native-android

react-native-flatlist