在React Native中设置表格布局

Question

我正在将React项目转换为React Native,需要帮助在React Native中设置网格布局.我想通过x行设置一个5-col(行数可能会有所不同)视图.我已经使用了react-native-tableview-simple软件包,但我无法指定单元格的范围.我也尝试过react-native-flexbox-grid包,我可以设置列,但是我仍然无法设置特定单元格的跨度宽度.我想知道我能用什么.

作为参考,我希望我的表看起来像这样的行:

     |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

在这里找到答案后，我发现了一个非常出色的库，其行为与Bootstrap表非常相似。我发现使用React Native进行布局非常具有挑战性，但是该库提供了可预测的布局结果。

反应本机Easy Grid

我同意应该将基本的flex表内置到React Native中，但是直到它们成为该库对我来说非常有用。