React-Native 应用程序的可折叠和可拖动部分列表

Question

我需要实现可折叠的 sectionList 以及可拖动的可折叠 header。问题是我必须在现有代码上实现可折叠和可拖动功能，该代码使用 sectionList 作为列表视图，如果有人可以帮助我提供任何代码或建议，那将是很棒的，因为我是 React-Native 的新手并正在寻找这个阶段很难

Answer 1

您可以使用此 react-native-collapsible and to add Draggable sup[port react-native-draggable-flatlist 实现可折叠功能，但它不支持 SectionList。您必须将您的项目视为 section 。

借助这 2 个库，您可以完成此任务。我已经为您创建了工作代码示例

import React, { Component } from "react";
import {
  View,
  TouchableOpacity,
  Text,
  SafeAreaView,
  StyleSheet
} from "react-native";
import DraggableFlatList from "react-native-draggable-flatlist";
import Collapsible from "react-native-collapsible";

class Example extends Component {
  state = {
    data: [
      {
        id: 1,
        title: "Header1",
        data: ["item1", "item2", "item3", "item4"]
      },
      { id: 2, title: "Header2", data: ["item5", "item6", "item7", "item8"] },
      { id: 3, title: "Header3", data: ["item9", "item10", "item11", "item12"] }
    ],
    collapsibleItems: []
  };

  _setCollapsible = id => {
    // clone ids
    const newIds = [...this.state.collapsibleItems];

    // check to add /remove id
    const index = newIds.indexOf(id);
    if (index > -1) {
      newIds.splice(index, 1);
    } else {
      newIds.push(id);
    }

    // set new ids
    this.setState({ collapsibleItems: newIds });
  };

  _renderSectionHeader(section, index, move, moveEnd) {
    return (
      <TouchableOpacity
        style={styles.sectionHeader}
        onLongPress={move}
        onPressOut={moveEnd}
        onPress={() => this._setCollapsible(section.id)}
      >
        <Text style={styles.sectionTitle}>{section.title}</Text>
      </TouchableOpacity>
    );
  }

  _renderSectionItems(section) {
    return (
      <View style={styles.sectionItems}>
        {section.data.map(item => (
          <Text style={styles.itemText} key={item}>
            {item}
          </Text>
        ))}
      </View>
    );
    //return <View style={{ height: 100, backgroundColor: "green" }}></View>;
  }

  renderItem = ({ item, index, move, moveEnd, isActive }) => {
    return (
      <React.Fragment>
        {this._renderSectionHeader(item, index, move, moveEnd)}
        <Collapsible collapsed={this.state.collapsibleItems.includes(item.id)}>
          {this._renderSectionItems(item)}
        </Collapsible>
      </React.Fragment>
    );
  };

  // collapsed={this.state.collapsibleIndex !== index}

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <DraggableFlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable-item-${item.id}`}
          scrollPercent={5}
          onMoveEnd={({ data }) => this.setState({ data })}
          extraData={this.state.collapsibleItems}
        />
      </SafeAreaView>
    );
  }
}

export default Example;

const styles = StyleSheet.create({
  sectionHeader: {
    backgroundColor: "#C0C0C0",
    padding: 20
  },
  sectionTitle: {
    fontWeight: "bold",
    fontSize: 20
  },
  sectionItems: { backgroundColor: "red" },
  itemText: { padding: 20 }
});

应用预览

React-Native 应用程序的可折叠和可拖动部分列表

Collapsible and Draggable sectionList for React-Native application

mobile

draggable

collapse

react-native

react-native-sectionlist