react-native 中带有可折叠部分标题的部分列表

Posted 2023-02-16

【中文标题】react-native 中带有可折叠部分标题的部分列表

【英文标题】：Section list with collapsible section header in react-native

【发布时间】：2020-10-01 22:13:00

【问题描述】：

我使用的是 react-native 版本 0.61.5。我想在 react-native 中做一个带有可折叠标题的部分列表，如下图所示。

这是我的 API 数据格式

data:[
  
    shift_name:'Day',
    data:[
    
      id:'1',
      fullname: "seela",
      inspection_date: "2020-06-10T04:45:32Z",
      issues: 1,
      response:
        shift_name:'Day'
      
     
    ]
  ,
  
    shift_name:'Afternoon',
    data:[
      
        id:'2',
        fullname: "Raju vijayan",
        inspection_date: "2020-06-9T04:45:32Z",
        issues: 3,
        response:
          shift_name:'Afternoon'
        
      ,
      
        id:'3',
        fullname: "Pratap P",
        inspection_date: "2020-06-8T04:45:32Z",
        issues: 2,
        response:
          shift_name:'Afternoon'
        
      
    ]
  
]

当我点击标题内容时应该展开和折叠。我如何在 react-native 中做到这一点？

【问题讨论】：

这能回答你的问题吗？ Animated Accordion/ Drawer/ Drop-down/ Collapsible-card in React Native

【参考方案1】：

使每个项目成为一个组件。

根据您的要求使用 Layoutanimation。

使用状态来管理项目的状态。即，打开和关闭。

const [open, setopen] = useState(false);

最初，项目处于关闭状态。

根据条件显示数据。

逻辑：只有在项目关闭时才需要指定高度。

!open &&  height: 40 

如果它没有打开，请给出标题高度。否则，它将占据它需要的高度。

完整代码

import React,  useState  from 'react';
import 
  View, Text, StyleSheet, TouchableOpacity, LayoutAnimation, Platform, UIManager,
 from 'react-native';

if (Platform.OS === 'android') 
  if (UIManager.setLayoutAnimationEnabledExperimental) 
    UIManager.setLayoutAnimationEnabledExperimental(true);
  



export default function TestFile() 
  return (
    <View style=styles.container>
      <Item />
      <Item />
      <Item />
      <Item />
      <Item />
      <Item />
    </View>
  );



function Item() 
  const [open, setopen] = useState(false);
  const onPress = () => 
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setopen(!open);
  ;
  return (
    <TouchableOpacity style=[styles.item, !open &&  height: 40 ] onPress=onPress activeOpacity=1>
      <Text>Header</Text>
      open && (
        <View>
          <Text> SOME DATA</Text>
          <Text> SOME DATA</Text>
          <Text> SOME DATA</Text>
          <Text> SOME DATA</Text>
          <Text> SOME DATA</Text>
          <Text> SOME DATA</Text>
        </View>
      )
    </TouchableOpacity>
  );


const styles = StyleSheet.create(
  container: 
    flex: 1,
    alignItems: 'center',
    padding: 50,
  ,
  item: 
    width: '100%',
    borderWidth: 1,
    paddingHorizontal: 20,
    overflow: 'hidden',
    paddingVertical: 10,
    marginBottom: 5,
  ,
);

结果

【参考方案2】：

我假设您的数据以状态存储，对吗？所以我有一种方法是在你的每个名为isCollapsed 的数据中添加一个附加属性，初始值为true

当单击某个项目的标题时，您将该项目的isCollapsed 设置为相反的值。

那么每个项目的可折叠视图的可见性状态取决于isCollapse属性。

我的解决方案 :) 希望有所帮助 :)

请检查我的代码：

renderItem = (item, index) => 
      return (
          <View>
              // Header content
              <TouchableOpacity
                  onPress=() => 
                      let  data  = this.state;
                      data = data.map((item, key) => 
                          if (key === index) 
                              item.isCollapsed = !item.isCollapsed;
                          
                          return item;
                      );
                      this.setState(
                          data,
                      );
                  
              >
              </TouchableOpacity>

              // Collapsible content
              <View style=
                  display: (item.isCollapsed) ? 'flex' : 'none'
              >

              </View>
          </View>
      );