我有一个名为results的项目,其中data = Won,Lost,Void或null来自服务器。目前我渲染所有这些。我想在此FlatList / ListItems屏幕中仅减少/渲染null。
这里的代码:
<FlatList
data={this.state.doctorsList}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>
那么我可以制作在屏幕上显示的视图,只有带有结果的框/信息== null?
谢谢。
如果要渲染所有空项,只需过滤数据即可
<FlatList
data={this.state.doctorsList.filter(item => item === null)}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>
如果你不想要空项目
<FlatList
data={this.state.doctorsList.filter(item => item !== null)}
keyExtractor={item => item.signal_id.toString()}
renderItem={({item}) =>
<ListItem
key={item.signal_id}
imageUrl={this.checkSportIcon(item.sport) ? (images[(item.sport).toLowerCase()]) : (images.default)}
itemTitle={item.league}
careerText={item.event}
distanceText={item.coef}
imageWidth={item.imageWidth}
imageHeight={item.imageHeight}
isLive={item.isLive}
bookie={item.bookie}
pick={item.pick}
stake={item.stake}
outcome={item.outcome}
date={Moment(item.start_date).format('lll')}
profit={item.profit}
/>
}
/>