Реактивные элементы FlatList не достигают нужной высоты - PullRequest
Новая
       29

Реактивные элементы FlatList не достигают нужной высоты

0 голосов
/ 07 мая 2018

У меня есть элементы с различной высотой (250 или 150) внутри FlatList, Когда выполняется итерация каждого элемента и добавляется состояние dataSrouce для FlatList, все отрисовывается нормально, но если я хочу избежать «добавляющего» эффекта и устанавливаю dataSrouce для всех элементов одновременно, кажется, что в FlatList есть странная ошибка, когда элементы не получают нужную высоту (на дне есть пустое место, где предмет должен был заполнить его).

Попробовал поставить " flexGrow: 1 " в FlatList, пробовал свойство " initialNumToRender ", Пытался зафиксировать высоту каждого элемента в представлении.

Контейнер FlatList "flex: 1".

enter image description here

Мой FlatList: 

  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;
`;

HomeCard: 

  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

1 Ответ

0 голосов
/ 31 марта 2019

Проблема была вызвана неправильным оформлением, примененным к дочерним элементам, Чтобы лучше понять, как работает FlexBox, мне удалось выяснить, что мне не хватает атрибута flex: 1 в элементах списка, и поэтому стиль элементов не рассчитан правильно.

...