在 React Native 中设置表格布局 [英] Setting up a table layout in React Native

问题描述

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

I'm transitioning a React project into React Native and need help setting up a grid layout in React Native. I want to set up a 5-col by x-row (number of rows may vary) view. I've played around with the react-native-tableview-simple package, but I can't specify the span of a cell. I've also tried the react-native-flexbox-grid package, which I'm able to set up columns, but I'm still not able to set the span-width of a specific cell. I wonder if there's anything I can use.

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

For reference, I would like my table to look something along the lines like this:

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

推荐答案

您可以在没有任何包的情况下执行此操作.如果每一行完全相同，执行以下操作应该可以解决您的问题；

You can do this without any packages. If each row is exactly the same doing the following should solve your problem;

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>
        );
    }
}

这篇关于在 React Native 中设置表格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！