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

Question

我使用的是 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 中做到这一点？

Answer 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,
  },
});

结果