在滚动上反应原生平面列表生成空格

问题描述

我正试图通过FlatList加载大量数据，但我面临的问题是，在滚动过程中，我在不同的地方也看到了这个问题，但没有一个告诉我如何正确解决这个问题。

我通过API获取的数据

我当前的平面列表：

<FlatList
      data={this.state.todayFixtures}
      renderItem={this.renderTournaments}
      extraData={this.state.refresh}
      keyExtractor ={(item, index) => item.tournamentId}
    />

和renderTournaments：

renderTournaments(fix) {
return <FootballDetail key={fix.tournamentId} todayFixture={fix} />;
}

这里是Football Detail：

sadasd
class FootballDetail extends Component {
state = {
fixtureToday: []
}
componentWillMount() {
//console.log(this.props.todayFixture.item);
this.setState({fixtureToday: this.props.todayFixture.item[0].matches});
}
constructor(props){
 super(props)
}
_onPressButton(fixture) {
Alert.alert(fixture.teamA + " - " + fixture.teamB)
}
renderTodayFixtures() {
  const { status, teams, teamResult } = styles;
  return this.state.fixtureToday.map((fixture) =>
    <CardSection>
      <View style={status} >
        {CommonFunctions.getStatus(fixture)}
      </View>
      <TouchableHighlight underlayColor="white" style={teams} onPress={() 
      => { this._onPressButton(fixture) }}>
        <View>
          <Text>{fixture.teamA}</Text>
          <Text>{fixture.teamB}</Text>
        </View>
      </TouchableHighlight>
      <View style={teamResult}>
        <Text>{fixture.teamAResult}</Text>
        <Text>{fixture.teamBResult}</Text>
      </View>
      <View style={{ justifyContent: 'center' }}>
        <Image source={require('../assets/img/notification_tab.png')} style={{width: 22, height: 22}} />
      </View>
    </CardSection>
)
}
render () {
 return (
  <Card>
    <CardSection>
      <View>
        <Text style={styles.tournamentTxt}>{this.props.todayFixture.item[0].tournamentName}: {this.props.todayFixture.item[0].tournamentStage}</Text>
      </View>
    </CardSection>
    {this.renderTodayFixtures()}
  </Card>
  )
 }
}

推荐答案

我尝试了平面列表文档中提供的getItemLayout解决方案。