React Native中如何实现表格并排布局？

核心思路 #

React Native中实现元素并排的核心是利用Flexbox布局：给两个表格的父容器设置flexDirection: 'row'让子元素横向排列，再给每个表格容器设置flex: 1平分可用宽度，就能实现预期的并排效果。

实现代码示例（第三方表格库版） #

如果使用react-native-table-component实现表格，先安装依赖：

npm install react-native-table-component --save

然后编写代码：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';

const DeviceTables = () => {
  // Devices1 表格数据
  const tableData1 = [
    ['Device ID', 'Status'],
    ['D001', 'Online'],
    ['D002', 'Offline'],
  ];
  
  // Devices2 表格数据
  const tableData2 = [
    ['Device ID', 'Status'],
    ['D003', 'Online'],
    ['D004', 'Online'],
  ];

  return (
    <View style={styles.container}>
      {/* 并排表格的父容器 */}
      <View style={styles.tablesWrapper}>
        {/* Devices1 表格容器 */}
        <View style={styles.tableBox}>
          <Table borderStyle={{ borderWidth: 1 }}>
            <Row data={tableData1[0]} style={styles.headerRow} textStyle={styles.headerText} />
            <Rows data={tableData1.slice(1)} textStyle={styles.cellText} />
          </Table>
        </View>

        {/* Devices2 表格容器 */}
        <View style={styles.tableBox}>
          <Table borderStyle={{ borderWidth: 1 }}>
            <Row data={tableData2[0]} style={styles.headerRow} textStyle={styles.headerText} />
            <Rows data={tableData2.slice(1)} textStyle={styles.cellText} />
          </Table>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  tablesWrapper: {
    flexDirection: 'row', // 横向排列子元素
    justifyContent: 'space-around', // 表格均匀分布
    flexWrap: 'nowrap', // 强制不换行，保持并排
  },
  tableBox: {
    flex: 1, // 每个表格平分父容器宽度
    marginHorizontal: 8, // 表格左右间距
  },
  headerRow: {
    height: 40,
    backgroundColor: '#f1f8ff',
  },
  headerText: {
    textAlign: 'center',
    fontWeight: 'bold',
  },
  cellText: {
    textAlign: 'center',
    paddingVertical: 8,
  },
});

export default DeviceTables;

自定义表格实现方案（无需第三方库） #

如果不想依赖第三方库，自己实现表格组件的布局逻辑完全一致：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// 自定义表格组件
const CustomTable = ({ title, data }) => {
  return (
    <View style={styles.tableContainer}>
      <Text style={styles.tableTitle}>{title}</Text>
      <View style={styles.tableBorder}>
        {/* 表头 */}
        <View style={styles.row}>
          {data[0].map((item, idx) => (
            <Text key={idx} style={styles.headerCell}>{item}</Text>
          ))}
        </View>
        {/* 表体内容 */}
        {data.slice(1).map((row, rowIdx) => (
          <View key={rowIdx} style={styles.row}>
            {row.map((cell, cellIdx) => (
              <Text key={cellIdx} style={styles.cell}>{cell}</Text>
            ))}
          </View>
        ))}
      </View>
    </View>
  );
};

const App = () => {
  const deviceData1 = [['Device ID', 'Status'], ['D001', 'Online'], ['D002', 'Offline']];
  const deviceData2 = [['Device ID', 'Status'], ['D003', 'Online'], ['D004', 'Online']];

  return (
    <View style={styles.container}>
      <View style={styles.tablesWrapper}>
        <CustomTable title="Devices1" data={deviceData1} />
        <CustomTable title="Devices2" data={deviceData2} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  tablesWrapper: {
    flexDirection: 'row',
    gap: 16,
  },
  tableContainer: {
    flex: 1,
  },
  tableTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 8,
    textAlign: 'center',
  },
  tableBorder: {
    borderWidth: 1,
    borderColor: '#ccc',
  },
  row: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderColor: '#ccc',
  },
  headerCell: {
    flex: 1,
    padding: 8,
    backgroundColor: '#f1f8ff',
    textAlign: 'center',
    fontWeight: 'bold',
  },
  cell: {
    flex: 1,
    padding: 8,
    textAlign: 'center',
  },
});

export default App;

适配注意事项 #

• 如果表格内容过宽导致挤压，可以调整tableBox的flex值，或者给表格设置maxWidth、缩小字体。
• 针对小屏设备，可结合Dimensions API动态设置flexDirection: 'column'，让表格纵向排列提升适配性。

内容的提问来源于stack exchange，提问作者Nazimuddin Mia