在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的布局非常具有挑战性，但是这个库提供了可预测的布局结果。

React Native Easy Grid

我同意应该在React Native中内置基本的flex表，但直到他们这个库对我来说非常有用。

Answer 3

尽管这是一篇过时的文章，但我正在寻找类似的问题

我为该解决方案集思广益，并且获得了最好的解决方案，我得到的最佳解决方案是将 react-native-table-component 包导入到我的项目中，并为我的应用程序准备了一个不错的表布局显示数据。可能会有更多的人想出办法来解决这个问题，我可以建议将此链接链接到您的所有答案：This link is the npm package installer link which have explanation to all the code and have examples

Answer 4

如果您想要通用的Table组件，为了获得如下输出：

import React from 'react';

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

export default class Table extends React.Component {

    renderRow(row) {
        return (
            <View style={{ flex: 1, flexDirection: 'row', padding: 10 }}>
                {
                    row.map((column) => {
                        return (
                            this.renderColumn(column)
                        )
                    })
                }
            </View>
        );
    }

    renderColumn(column) {
        return (
            <View style={{
                flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'
            }}>
                {
                    column.map((item) => {
                        return (
                            <View style={{ flex: 1, flexDirection: "row" }}>
                                <Text style={{ flex: 1, alignSelf: 'center' }} size={16}>{item}</Text>
                            </View>
                        )
                    })
                }
            </View>
        )
    }

    render() {
        const data = this.props.dataSource;
        return (
            <View style={{
                alignSelf: 'stretch',
                flexDirection: 'column',
                alignItems: 'center',
            }}>
                {
                    data.map((row) => {
                        return this.renderRow(row);
                    })
                }
            </View>
        );
    }
}

在主UI文件中，您可以通过以下方式呈现表格：

render() {
    const dataSource = [
        [["Row1 Column 1 Item0"], ["Row1 Column1 Item0 "]],
        [["Row2 Column 1 Item0"], ["Row2 Column2 Item0", "Row2 Column2 Item1"]],
    ]
    return (
        <UWTable dataSource={dataSource}/>
    )
}

Answer 5

使用功能组件：

（指定数组中的行数和列数）

创建行组件

function Row({ column }) {  
  return (
    <View style={styles.rowStyle}>
      {column.map((data) => (
        <Cell data={data} />
      ))}
    </View>
 );
}

创建单元格组件

function Cell({ data }) {
  return (
    <View style={styles.cellStyle}>
      <Text>{data}</Text>
    </View>
  );
}

创建一个网格组件

function Grid() {
  const data = [
    [15, 14, 13, 12],
    [11, 10, 9, 8],
    [7, 6, 5, 4],
    [0, 1, 2, 3],
  ];
  return (
    <View style={styles.gridContainer}>
      {data.map((column) => (
        <Row column={column} />
      ))}
    </View>
  );
}

设置组件的样式：

const styles = StyleSheet.create({
  gridContainer: {
      width: 220,
  },
  rowStyle: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
  },
  cellStyle: {
    flex: 1,
    margin: 10,
  },
});