您可以创建一个名为Table的组件，它表示表本身，还可以创建一个名为TableRow的组件，它表示表中的一行。

import React from 'react';
import { View } from 'react-native';
import TableRow from './TableRow';

const Table = () => (
  <View style={{ flexDirection: 'column' }}>
    <TableRow itemName="Item 1" itemDescription="Description for item 1" />
    <TableRow itemName="Item 2" itemDescription="Description for item 2" />
    <TableRow itemName="Item 3" itemDescription="Description for item 3" />
  </View>
);

export default Table;

以及

import React from 'react';
import { View, Text } from 'react-native';

const TableRow = ({ itemName, itemDescription }) => (
  <View style={{ flexDirection: 'row' }}>
    <View style={{ width: 'auto', alignItems: 'flex-start' }}>
      <Text>{itemName}</Text>
    </View>
    <View style={{ flex: 3, alignItems: 'flex-start' }}>
      <Text>{itemDescription}</Text>
    </View>
  </View>
);

export default TableRow;

在我看来，使用flex: 1而不是width: 'auto'看起来更好，但当然我不知道你的先决条件是什么。
要使用数据填充表，需要向表组件传递一个项目数组。要执行此操作，请修改表组件

import React from 'react';
import { View } from 'react-native';
import TableRow from './TableRow';

const Table = ({ items }) => (
  <View style={{ flexDirection: 'column' }}>
    {items.map(item => (
      <TableRow
        key={item.name}
        itemName={item.name}
        itemDescription={item.description}
      />
    ))}
  </View>
);

export default Table;

现在您可以执行以下操作：

import React from 'react';
import Table from './Table';

const items = [
  { name: 'Item 1', description: 'Description for item 1' },
  { name: 'Item 2', description: 'Description for item 2' },
  { name: 'Item 3', description: 'Description for item 3' },
];

const App = () => (
  <Table items={items} />
);

export default App;

这将用数据填充您的表。

好的，我想我得到了我想要的功能，可能有一种更可扩展的方法来做到这一点，这可能是非常低效的，但它似乎工作。
要点是，我可以使用一个状态变量来存储每个单元格所需的宽度，然后在onLayout中，每当布局发生变化时，我可以调用setColWidth来更新该变量，然后，我可以使用style将最小宽度设置为最大单元格的宽度。
还有一个数组，用于确定是否收缩给定列以给其他列留出空间。
最后，我可以在父级View中调用alignItems，将表收缩到适合数据的最小大小

import React, {useState} from 'react';
import {LayoutChangeEvent, useWindowDimensions, View} from 'react-native';

const Table = ({
  data,
  rowStyle = undefined,
  priviledge = new Array(data.length).fill(false),
}: {
  data: any[];
  rowStyle: Object | undefined;
  priviledge: boolean[];
}) => {
  // Initialize list of widths
  const [colWidth, setColWidth] = useState<number[][]>(
    data.map(row => new Array(Object.keys(row).length).fill(0)),
  );

  // Get widows size
  const maxSize = useWindowDimensions();

  if (!colWidth || !maxSize) {
    return <></>;
  }

  // Fix issues of going off screen
  const onLayout = (event: LayoutChangeEvent, row: number, col: number) => {
    // Get current width
    var {width, __} = event.nativeEvent.layout;

    // Find total row width
    const sum =
      colWidth[row].reduce((partialSum, a) => partialSum + a, 0) -
      colWidth[row][col] +
      width;

    // Shrink unpriviledged components
    if (!priviledge[col] && sum > maxSize.width) {
      width = width - (sum - maxSize.width);
      if (width < 0) {
        width = 0;
      }
    }

    // Store width in colWidth array
    colWidth[row][col] = width;
    setColWidth([...colWidth]);
  };

  return (
    <View>
      {/* Map along rows */}
      {data.map((item, rowIndex) => (
        <View
          key={rowIndex}
          style={{
            flexDirection: 'row',
            maxWidth: maxSize.width,
          }}>
          {/* Map along columns */}
          {Object.keys(item).map((key, colIndex) => (
            <View
              key={key}
              onLayout={event => {
                onLayout(event, rowIndex, colIndex);
              }}
              style={{
                minWidth: Math.max(...colWidth.map(row => row[colIndex])),
                flexShrink: 1,
                ...rowStyle,
              }}>
              {item[key]}
            </View>
          ))}
        </View>
      ))}
    </View>
  );
};

export default Table;

下面是我的项目中的一些示例数据的外观（黄色框是使用此代码的表）：
Android emulator showing the working code
现在，我能看到的唯一问题是，它不更新时，从横向旋转到纵向（但纵向到横向工程罚款？？？）