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

Posted 2023-02-16

【中文标题】React-Native 应用程序的可折叠和可拖动部分列表

【英文标题】：Collapsible and Draggable sectionList for React-Native application

【发布时间】：2020-01-04 09:50:00

【问题描述】：

我需要实现可折叠 sectionList 以及可拖动标题。 问题是我必须在使用 sectionList 作为列表视图的现有代码上实现可折叠和可拖动的功能，如果有人可以帮助我提供任何代码或建议，因为我是 React-Native 的新手并发现它非常好这个阶段比较难

【参考方案1】：

您可以使用此react-native-collapsible 实现可折叠功能并添加 Draggable 支持[端口react-native-draggable-flatlist，但它不支持 SectionList。您必须将您的项目视为 section 。

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

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 
);

应用预览

【讨论】：

感谢 Mehran 提供的代码，我尝试了一个新项目，我正在努力拖动它，它正在弹跳，我需要做一些额外的事情还是我做错了什么？

拖动默认为长按。尝试长按项目，因为 onPress 将在 collapsible 上工作，我们还必须使 flatlist 可滚动。如果回答有帮助，请点赞并标记正确