如何在本机反应中关闭滑动项目？

Question

我有这段代码（从本机示例中获取）运行良好。但是在点击任一侧（右侧或左侧）后，'swipe' 仍然打开。我知道有一个名为 closeRow() 的方法，但我不知道如何在这种情况下应用。左键用于将 'split' 项目合并为 2 个或更多，而右键用于删除当前项目。我需要的是关闭此列表中所有打开的行。为什么全部？因为在 'delete' 函数的情况下，当前项目被正确删除，但是下一个右击按钮打开（因为它与列表的 'index' 相同，即使项目本身是不同的）。这是我当前的代码：

<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

目标

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

怎么办？

你只需要先收集每一行的ref，然后当按钮被点击时，触发所有ref行的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}
      />
    )
  }
}

如何在本机反应中关闭滑动项目？

How to close swipe item in react-native?

react-native

swipe-gesture