Question

我有这段代码（从本机示例获得），可以正常工作。但是，单击任意一侧（右侧或左侧）后，“滑动”仍会打开。我知道有一个名为closeRow（）的方法，但是在这种情况下我不知道如何应用。左按钮用于将“拆分”项目拆分为2个或更多，而右按钮用于删除当前项目。我需要关闭此列表中所有打开的行。为何全部？因为在使用“删除”功能的情况下，当前项目以正确的方式删除，但是下一个获得正确的按钮被打开（因为它是列表的相同“索引”，即使项目本身不同也是如此）。这是我当前的代码：

<Container style={styles.container}>
        <Header>
          <Left>
            <Button transparent onPress={() => this.props.navigation.goBack()}>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>{translate("title", { ...i18n_opt, name })}</Title>
          </Body>
        </Header>

        <Content>
          <Modal
            isVisible={this.state.visibleModal === true}
            animationIn={"slideInLeft"}
            animationOut={"slideOutRight"}
          >
            {this._renderModalContent()}
          </Modal>

          <View style={styles.line}>
            <View style={{ flex: 2 }}>
              <Text style={[styles.alignCen, styles.headerTitle]}>
                {translate("lap", { ...i18n_opt })}
              </Text>
            </View>
            <View style={{ flex: 10 }}>
              <Text style={[styles.alignCen, styles.headerTitle]}>
                {translate("time", { ...i18n_opt })}
              </Text>
            </View>
            <View style={{ flex: 3 }}>
              <Text
                style={[
                  { paddingRight: 10 },
                  styles.alignRig,
                  styles.headerTitle
                ]}
              >
                {translate("diff", { ...i18n_opt })}
              </Text>
            </View>
          </View>

          <List
            enableEmptySections
            dataSource={laps2}
            ref={c => {
              this.component = c;
            }}
            renderRow={data => <PersonalRankItem dados={data} />}
            renderLeftHiddenRow={data => (
              <Button
                full
                onPress={() => {
                  this.setState({
                    ...this.state,
                    visibleModal: true,
                    cur_tx_id: tx_id,
                    cur_lap: data.lap
                  });
                }}
                style={{
                  backgroundColor: "#CCC",
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center",
                  marginBottom: 6
                }}
              >
                <MaterialCommunityIcons
                  name="arrow-split-vertical"
                  size={20}
                  color="#5e69d9"
                />
              </Button>
            )}
            renderRightHiddenRow={(data, secId, rowId, rowMap) => (
              <Button
                full
                danger
                onPress={_ => {
                  //alert("Delete");
                  //console.log("Data.lap:",data.lap);
                  dispatchDeleteLap(tx_id, data.lap, true);
                }}
                style={{
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center",
                  marginBottom: 6
                }}
              >
                <Icon active name="trash" size={20} />
              </Button>
            )}
            leftOpenValue={70}
            rightOpenValue={-70}
          />
        </Content>
      </Container>

Answer 1

目标

每次单击行侧按钮之一时，您需要关闭所有行。下一个问题是删除项目时，即使内容不同，也会打开下一行。

如何？

您需要做的就是首先收集每行的引用，然后单击按钮时，触发所有引用行的closeRow方法。而且重要的是，使您的行键持久且唯一，以避免出现类似情况的问题。

快速代码示例

class Screen extends Component {
  constructor(props) {
    super(props);
    this._rowRefs = [];
  }

  // this is used to collect row ref
  collectRowRefs = (ref) => {
    this._rowRefs.push(ref);
  };

  // your render row function
  renderRow = (data) => (
    // make this row key consistent and unique like Id, do not use index counter as key
    <PersonalRankItem key={data.id} dados={data} ref={this.collectRowRefs}/>  
  );

  // When your hidden side button is clicked
  onButtonClicked = (data) => {
    // do the button normal action
    // ....

    // close each row
    this._rowRefs.forEach((ref) => {
      ref.closeRow();
    });
  };

  // this is your hidden side button
  renderLeftHiddenRow = () => (
    <Button onClick={this.onButtonClicked} />
  );

  render() {
    // Your List in here
    return (
      <List
        renderRow={this.renderRow}
        renderLeftHiddenRow={this.renderLeftHiddenRow}
      />
    )
  }
}

如何关闭本机中的滑动项目？

1 个答案: