在React Native中设置表布局

lskq00tm  于 2023-04-07  发布在  React
关注(0)|答案(4)|浏览(186)

我正在将一个React项目转换为React Native,需要帮助在React Native中设置网格布局。我想设置一个5列x-row(行数可能会有所不同)视图。我已经使用了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 |
pjngdqdw

pjngdqdw1#

如果每一行都完全相同,那么执行以下操作应该可以解决您的问题;

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

rqcrx0a62#

在这里寻找答案后,我发现了一个非常棒的库,它的行为很像Bootstrap表。我发现React Native的布局非常具有挑战性,但这个库提供了可预测的布局结果。
React Native Easy Grid
我同意基本的flex表应该内置到React Native中,但在它们被内置之前,这个库对我来说非常好。

thigvfpy

thigvfpy3#

虽然这是一个老帖子,但我正在寻找类似的问题,
我在互联网上集思广益,寻找解决方案,我得到的最好的解决方案是将react-native-table-component包导入到我的项目中,并为我的应用程序准备一个体面的表格布局来显示数据。可能会有更多的灵魂想出一种方法来做到这一点,我可以推荐这个链接给所有的答案:This link is the npm package installer link which have explanation to all the code and have examples

zbdgwd5y

zbdgwd5y4#

使用功能组件:
(指定数组中的行数和列数)
创建行组件

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

相关问题