如何实现点击行创建DataTable？点击Text触发打开带3列表头的DataTable

Let's get this working exactly how you need it. You want to click on a row (or any of the Text components inside it) to open a DataTable with 3 column headers, showing the clicked row's details. Here's the modified code with all the pieces in place:

Full Implementation Code #

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { DataTable } from 'react-native-paper'; // Using react-native-paper for DataTable (adjust if using another library)

const YourRowListComponent = ({ albList }) => {
  const [selectedRow, setSelectedRow] = useState(null);
  const [showDataTable, setShowDataTable] = useState(false);
  let counter = 0;

  const handleRowClick = (rowData) => {
    setSelectedRow(rowData);
    setShowDataTable(true);
  };

  return (
    <View style={styles.container}>
      {/* Clickable rows (wrapped in TouchableOpacity for full-row interactivity) */}
      {albList.map((alb) => (
        <TouchableOpacity
          key={counter++}
          style={styles.rowContainer}
          onPress={() => handleRowClick(alb)}
          activeOpacity={0.7}
        >
          <Text style={[styles.textStyle, { marginLeft: '5%' }]}>
            {alb.Tescil_No}
          </Text>
          <Text style={[styles.textStyle, { marginLeft: '6%' }]}>
            {alb.GumrukAdi}
          </Text>
          <Text style={[styles.textStyle, { marginLeft: '5%' }]}>
            {alb.ACIKLAMA}
          </Text>
        </TouchableOpacity>
      ))}

      {/* 3-column DataTable (visible only when a row is clicked) */}
      {showDataTable && selectedRow && (
        <DataTable style={styles.dataTable}>
          <DataTable.Header>
            <DataTable.Title>Tescil No</DataTable.Title>
            <DataTable.Title>Gumruk Adi</DataTable.Title>
            <DataTable.Title>Aciklama</DataTable.Title>
          </DataTable.Header>

          <DataTable.Row>
            <DataTable.Cell>{selectedRow.Tescil_No}</DataTable.Cell>
            <DataTable.Cell>{selectedRow.GumrukAdi}</DataTable.Cell>
            <DataTable.Cell>{selectedRow.ACIKLAMA}</DataTable.Cell>
          </DataTable.Row>
        </DataTable>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 10,
  },
  rowContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  textStyle: {
    fontSize: 14,
    color: '#333',
  },
  dataTable: {
    marginTop: 20,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    padding: 8,
  },
});

export default YourRowListComponent;

Key Details Explained: #

• State Management: selectedRow stores the full data of the clicked row, while showDataTable toggles whether the table is rendered on screen.
• Clickable Rows: The original View is wrapped in TouchableOpacity to make the entire row clickable. If you only want individual Text components to trigger the table, you can move the onPress handler directly to each Text instead.
• 3-Column DataTable: Uses react-native-paper's pre-built DataTable component (swap this for a custom View-based table if you're not using the library) with headers matching your data fields. It only appears when a row has been selected.
• Styling: Added minimal, clean styling for rows and the table—feel free to adjust colors, padding, and borders to match your app's design system.

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