在React本机中设置表布局

Question

我正在将一个React项目转换为Reacti原住民，并需要帮助在Reacti原住民中设置一个网格布局。我想要设置一个5-col x行(行数可能不同)视图。我玩过react本机表视图-简单包，但我不能指定单元格的跨度。我也尝试了react本机柔性盒网格包，我可以设置列，但我仍然不能设置特定单元格的跨度。我想知道是否有什么我能用的。

作为参考，我希望我的桌子看起来像这样的东西：

     |Col 1|Col 2|Col 3|Col 4|Col 5|
     |------------------------------
Row 1|     Text        | Yes |  No | 
     |------------------------------
Row 2|     Text        | Yes |  No | 
     |------------------------------
Row 3|     Text        |  Dropdown | 

Answer 1

你可以不用任何软件包就能做到这一点。如果每一行完全相同，那么执行以下操作可以解决您的问题；

export default class Table extends Component {
    renderRow() {
        return (
            <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
                <View style={{ flex: 1, alignSelf: 'stretch' }} /> { /* Edit these as they are your cells. You may even take parameters to display different data / react elements etc. */}
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
                <View style={{ flex: 1, alignSelf: 'stretch' }} />
            </View>
        );
    }

    render() {
        const data = [1, 2, 3, 4, 5];
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            {
                data.map((datum) => { // This will render a row for each data element.
                    return this.renderRow();
                })
            }
            </View>
        );
    }
}

Answer 2

在这里寻找答案之后，我发现了一个非常好的库，它的行为非常类似于引导表。我已经发现布局与反应本土非常具有挑战性，但这个库提供了可预测的布局结果。

反应本机易栅

我同意应该内置基本的flex表来响应本机，但在它们成为之前，这个库对我来说非常有用。

Answer 3

虽然这是个老职位，但我正在寻找类似的问题，

我集思广益，破坏了互联网的解决方案，我得到的最好的解决方案是将react-native-table-component包导入到我的项目中，并为我的应用程序准备一个体面的表格布局，以显示数据。也许会有更多的灵魂想出一种方法来做这件事，我可以推荐你所有答案的链接：此链接是npm包安装程序链接，它对所有代码都有解释，并有示例。