FlatList 呈现行但不显示项目

Question

我正在尝试制作一个包含可以展开和折叠的项目的 FlatList onPress

但是，当我从另一个屏幕添加新项目然后返回到 SearchListScreen 时，它只会显示 2 个项目，但 FlatList 确实呈现了正确的行数。

示例：

添加新项目之前

添加新项目后

删除项目或展开项目时会发生同样的事情。

这是我的代码：

SearchList.js

import React, { Component } from 'react'
import { Text, View, FlatList, StyleSheet } from 'react-native'
import SearchCard from './SearchCard'

export default class SearchList extends Component {
  wrapperStyle (index) {
    return index > 0 ? styles.listItemWrapper : [styles.listItemWrapper, styles.wrapperFirst]
  }

  _renderItem = ({item, index}) => (
    <View style={this.wrapperStyle(index)}>
      <SearchCard
        search={item}
        id={item.id}
        filterAttributes={this.props.filterAttributes}
        onSearch={this.props.onSearch}
        onFavorite={this.props.onFavorite}
        favorites={this.props.favorites}
      />
    </View>
  )

  render () {
    const { searches, filterAttributes, onSearch, onFavorite, favorites } = this.props

    return (
      <FlatList
        data={searches}
        extraData={{ filterAttributes: filterAttributes, onSearch: onSearch, onFavorite: onFavorite, favorites: favorites, searches: searches }}
        keyExtractor={item => item.id}
        renderItem={this._renderItem}
        enableEmptySections
        style={{backgroundColor: 'red'}}
      />
    )
  }
}

const styles = StyleSheet.create({
  wrapperFirst: {
    marginTop: 20
  },
  listItemWrapper: {
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 20
  }
})

Answer 1

经过几个小时的努力，我发现在 item 中添加 height 解决了问题。

Answer 2

这可能是与 StyleSheet 的 styles 相关的问题应用于 row 或 FlatList 本身。在我的例子中，我对 FlatList 应用了错误的 style property，在 return 中没有显示列表。

FlatList 呈现行但不显示项目

FlatList rendered row but not displaying items

react-native

react-native-flatlist