根据表中的内容动态设置列宽

Question

我正在尝试在我的react-native应用程序中从HTML复制组件背后的默认逻辑，这意味着给定单元格的内容，它应相应地扩展其宽度，并在同一列中减少单元格的设置，并减少其他专栏文章，像这样：

+-------+-------+----------------------------+-------+-------+
|  HEAD |  HEAD |            HEAD            |  HEAD |  HEAD |
+-------+-------+----------------------------+-------+-------+
| short | short | short                      | short | short |
+-------+-------+----------------------------+-------+-------+
| short | short | very long text in one cell | short | short |
+-------+-------+----------------------------+-------+-------+
| short | short | short                      | short | short |
+-------+-------+----------------------------+-------+-------+

由于起初我不知道该表将要具有的列数，所以我只应保证整个表都适合设备的屏幕（没有水平滚动），并且每一列都将具有包含数据集给出的最长字符串内容的宽度。

我尝试在每个单元格中使用属性alignSelf: 'stretch'，但结果却并不理想，因为它只会相应地增加该特定单元格的内容，如提供的屏幕截图所示。

{data.map(d => {
    return (
        <View key={d} style={{ flexDirection: 'row' }}>
            <View style={{ alignSelf: 'stretch', borderRightColor: 'red', borderRightWidth: 1, padding: 8 }}>
                <Text>{d}</Text>
            </View>
            <View style={{ alignSelf: 'stretch', borderRightColor: 'red', borderRightWidth: 1, padding: 8 }}>
                <Text>{d}</Text>
            </View>
            <View style={{ alignSelf: 'stretch', borderRightColor: 'red', borderRightWidth: 1, padding: 8 }}>
                <Text>{d}</Text>
            </View>
            <View style={{ alignSelf: 'stretch', borderRightColor: 'red', borderRightWidth: 1, padding: 8 }}>
                <Text>{d}</Text>
            </View>
        </View>
    );
})}

任何帮助将不胜感激。