在滚动上反应原生平面列表生成空格 [英] React Native FlatList on scroll produces whitespace
本文介绍了在滚动上反应原生平面列表生成空格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正试图通过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解决方案。
因此,基本上要使这种方法起作用,您必须在flatList中指定卡片或行项的高度,例如:(Height:100)呈现项的高度和在renderItem中使用的文本添加道具编号OfLines={1},这样它就不会在动态内容上扰乱卡片UI。 注意:在renderItem、KeyExtractor和intialNumberToRender={list.long}中使用纯组件这篇关于在滚动上反应原生平面列表生成空格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文