Как выделить элемент из плоского списка и показать опцию удаления, чтобы удалить этот элемент из списка при длительном нажатии этого элемента? - PullRequest
Новая
       22

Как выделить элемент из плоского списка и показать опцию удаления, чтобы удалить этот элемент из списка при длительном нажатии этого элемента?

0 голосов
/ 28 мая 2019

Я хочу выделить элемент из плоского списка при длительном нажатии этого элемента и показать опцию удаления, чтобы удалить этот элемент из списка. 

    renderFlatlist = () => {
    return (
      <View style={styles.flatListContainer}>
        <FlatList
          style={styles.flatListStyle}
          showsVerticalScrollIndicator={false}
          data={this.state.fetchProjectDetail}
          keyExtractor={(item, index) => index.toString()}
          renderItem={this._renderItem}
        />
      </View>
    );
  };

  _renderItem = ({ item }) => {
    console.log("_renderItem", item.id);
    return (
      <TouchableOpacity
        style={{ marginTop: 10 }}
        onLongPress={this._handleLongPress(item)}
        onPress={() => {
          this.props.navigation.navigate("CreateProject", {
            database: this.props.navigation.state.params.database,
            id: item.id,
            from: "edit"
          });
        }}
      >
        <Text>Project Name: {item.project_name}</Text>
      </TouchableOpacity>
    );
  };

  _handleLongPress = item => {
    Alert.alert("LongPress");
  };

Я много сделал, но когда я рендерилсписок, который предупреждает, продолжает появляться без длительного нажатия этого элемента из списка.И как мне выделить элемент при длительном нажатии и отобразить опцию удаления, чтобы удалить элемент из списка.

1 Ответ

1 голос
/ 28 мая 2019

Вы сразу вызываете обработчик, но это должен быть обратный вызов, т.е. () => this._handleLongPress(item). Оттуда вы можете установить любое нужное вам состояние, чтобы выделить этот ряд.

Я предлагаю использовать вспомогательную структуру данных, чтобы отслеживать, какие пункты были долго нажаты. Вот пример, где я использую карту для хранения идентификатора выбранного элемента и применения стиля выделения. Если вам не нужно несколько выбранных, вы можете просто сохранить выбранный идентификатор самостоятельно.

Хитрость здесь в том, чтобы использовать реактив FlatList extraData рэпа в качестве тигра для повторной визуализации списка, поскольку реквизиты данных не изменились (по уважительной причине, вы не должны изменять свой источник данных внутри компонентов).

codesandbox

...