React Native实现可折叠表格（Accordion Table）的方案咨询

当然可以实现这个需求！只需要将你用react-native-table-component实现的表格直接嵌套到react-native-paper的List.Accordion内部，替换掉原来的List.Item即可。下面是整合后的完整可运行代码：

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
import { List } from 'react-native-paper';

export default class AccordionWithTable extends Component {
  state = { 
    expanded: false,
    tableHead: ['this is my drop table'],
    tableData: [
      ['1', '2'],
      ['a', 'b'],
      ['1', '2'],
      ['a', 'b']
    ]
  };

  _handlePress = () => this.setState({ expanded: !this.state.expanded });

  render() {
    const { expanded, tableHead, tableData } = this.state;
    return (
      <View style={styles.container}>
        <List.Section style={{ marginTop: 50 }}>
          <List.Accordion 
            title="展开查看表格" 
            style={{ backgroundColor: 'pink' }} 
            left={props => <List.Icon {...props} />}
            expanded={expanded}
            onPress={this._handlePress}
          >
            {/* 嵌入的表格组件 */}
            <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
              <Row data={tableHead} style={styles.head} textStyle={styles.text} />
              <Rows data={tableData} textStyle={styles.text} />
            </Table>
          </List.Accordion>
        </List.Section>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    backgroundColor: '#fff'
  },
  head: {
    height: 40,
    backgroundColor: '#f1f8ff'
  },
  text: {
    margin: 6
  }
});

关键说明： #

• 把表格相关的状态（tableHead、tableData）合并到了同一个组件的state中，统一管理更方便
• 将原表格的渲染代码直接放到List.Accordion的子元素位置，替代了原来的列表项
• 保留了折叠面板的展开/收起状态控制逻辑，点击面板标题即可切换表格的显示/隐藏
• 样式上保留了你原来的自定义配置，你可以根据需求随时调整颜色、间距等参数

内容的提问来源于stack exchange，提问作者user12932112