我在FlatList上遇到问题。我有一个flatlist和flatlistitem组件。我在flatlistitem中也有一个复选框。我在Flatlistitem中将“动画”用于显示和隐藏复选框。我想显示和隐藏所有复选框,当我按下切换按钮时。但是,当我单击切换按钮时,只会显示和隐藏上一个flatlistitem的复选框。
如果您能帮助我,我会很高兴。视图:
<Animated.View
style={{
opacity: this.state.controlOpacity,
width: this.state.controlWidth}}>
<CheckBox
checked={this.state.currentValue}
onPress={()=> this.toggleCheckForApprove()}
/>
</Animated.View>
当我单击全选切换按钮调用时:
selectAll() {
if (!this.state.editMode) {
Animated.sequence([
Animated.parallel([
Animated.timing(this.state.controlOpacity, {
toValue: 1,
duration: 300
}),
Animated.timing(this.state.controlWidth, {
toValue: 30,
duration: 300
})
])
]).start();
} else {
Animated.sequence([
Animated.parallel([
Animated.timing(this.state.controlOpacity, {
toValue: 0,
duration: 300
}),
Animated.timing(this.state.controlWidth, {
toValue: 0,
duration: 300
})
])
]).start();
}
this.setState({ editMode: !this.state.editMode });
console.log("edit state: " + this.state.editMode)}
这是我的单位列表:
<FlatList
ref={"flatList"}
data={this.props.invoices}
extraData={this.state}
renderItem={({ item, index }) => {
return (
<FlatListItem
ref={instance => {
this.child = instance;
}}
item={item}
index={index}
parentFlatList={this}
/>
);
}}
keyExtractor={(item, index) => index.toString()}
/>
<AddModal ref={"addModal"} parentFlatList={this} />
<InvoiceDetailModal ref={"invoiceDetailModal"} parentFlatList={this} />
<PdfModal ref={"pdfModal"} parentFlatList={this} />