使用 Native-Base 在 FlatList 中关闭 SwipeRow

Question

如何关闭 FlatList 中的 SwipeRow？

使用 ListView 很容易做到这一点，但由于下一个版本将使用 FlatList，所以应该可以做到。

看了他们的源码，好像还没有实现。

Answer 1

你能试试这个吗

import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { Container, Header, Content, SwipeRow, View, Text, Icon, Button } from 'native-base';

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = { data: [{ key: 'a' }, { key: 'b' }] }
    this.component = [];
    this.selectedRow;
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <FlatList
            data={[{ key: 'a', value: 'Row one' }, { key: 'b', value: 'Row two' }, { key: 'c', value: 'Row three' }, { key: 'd', value: 'Row four' }, { key: 'e', value: 'Row five' }]}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => <SwipeRow
              ref={(c) => { this.component[item.key] = c }}
              leftOpenValue={75}
              rightOpenValue={-75}
              onRowOpen={() => {
                if (this.selectedRow && this.selectedRow !== this.component[item.key]) { this.selectedRow._root.closeRow(); }
                this.selectedRow = this.component[item.key]
              }}
              left={
                <Button success onPress={() => alert('Add')}>
                  <Icon active name="add" />
                </Button>
              }
              body={
                <View style={{ paddingLeft: 20 }}>
                  <Text>{item.value}</Text>
                </View>
              }
              right={
                <Button danger onPress={() => alert('Delete')}>
                  <Icon active name="trash" />
                </Button>
              }
            />}
          />
          <Button style={{ margin: 20 }} onPress={() => this.selectedRow._root.closeRow()}><Text>Close row</Text></Button>
        </Content>
      </Container>
    );
  }
}

使用 Native-Base 在 FlatList 中关闭 SwipeRow

Closing SwipeRow inside FlatList using Native-Base

react-native

native-base