React native 反应本机表格单元格填充整行，而不仅仅是单元格

我试图在react native中创建一个表，但是单元格填充了整个行空间，而不仅仅是单元格。为什么?

import { Table, TableWrapper, Row, Cell } from 'react-native-table-component';
...

this.state = {
      tenantData: {},
      tenantLedger: [],
      tableHead: ['Date of Credit', 'Description', 'Charge', 'Credit', 'Balance'],
      widthArr: [80, 95, 65, 65, 65]
};
...

<Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9'}}>
   <Row
      data={this.state.tableHead}
      style={styles.head}
      textStyle={styles.text}
      widthArr={this.state.widthArr}
   />
   {
      tableData.map((rowData, index) => (
         <TableWrapper key={index} style={styles.row}>
            {
               rowData.map((cellData, cellIndex) => (
                  <Cell key={cellIndex} data={cellData} textStyle={styles.text} />
               ))
            }
         </TableWrapper>
      ))
   }
</Table>
...

text: { textAlign: 'center', fontWeight: '100' },
row: { height: 40, backgroundColor: '#E7E6E1' },
head: { height: 40, backgroundColor: '#f1f8ff' },

我的输出是：

有人知道为什么电池位置不正确吗

---

谢谢

您不需要表格包装器和单元格来显示数据。单元格将具有全宽。如果你只是想显示数据

替换这个

与

---

注意：从“react native table component”导入行

尝试在styles.rowIt中设置弹性方向：“row”几乎可以解决此问题。唯一的问题是列未与标题列对齐。尝试在TableWrapper上设置widthArr，如果不起作用，则可以使用widthArr设置每个单元格的宽度，cellIndexI希望为特定单元格设置touchableopacity

{
      tableData.map((rowData, index) => (
         <TableWrapper key={index} style={styles.row}>
            {
               rowData.map((cellData, cellIndex) => (
                  <Cell key={cellIndex} data={cellData} textStyle={styles.text} />
               ))
            }
         </TableWrapper>
      ))
   }

<Rows data={state.rowData} textStyle={styles.text}/>