如何在React Native中重新呈现所有平面列表项目?

时间:2018-11-14 18:22:57

标签: javascript reactjs react-native

我在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} />

0 个答案:

没有答案