react-native表格

y199710

已于 2024-02-05 16:59:25 修改

阅读量558

点赞数 6

文章标签： react native react.js javascript

于 2024-02-05 16:58:03 首次发布

本文链接：https://blog.csdn.net/y199710/article/details/136043930

版权

一、`react-native-beautiful-table`

注：无法设置合并单元格

1-1、下载

npm install react-native-beautiful-table

1-2、使用

import BeautifulTable from 'react-native-beautiful-table';

 const ColumnsData = [
    {
      title: 'ww',
      dataKey: 'ww',
      align: 'center',
      flex: 1 / 3,
    },
    {
      title: 'ee',
      dataKey: 'ee',
      flex: 1 / 3,
      align: 'center',
    },
    {
      title: 'rr',
      dataKey: 'rr',
      flex: 1 / 3,
      align: 'center',
    },
  ];
  const Data = [
    {
      id: 1,
      ww: 'tttt',
      ee: 'nn',
      rr: '34',
    },
    {
      id: 2,
      ww: 'bbbb',
      ee: 'vv',
      rr: '12',
    }
  ];


<BeautifulTable
    containerStyle={{
      width: 343 ,
      backgroundColor: '#E5EFFF',
    }}
    filterSetRowStyle={(item, index) => {
      // 控制某几项的样式
      if (index % 2 === 0) {
        // 偶数行
        return {
          backgroundColor: '#E5EFFF',
          width: 343 * densityFactor,
        };
      } else {
        // 奇数行
        return {
          backgroundColor: '#F2F7FF',
          width: 343,
        };
      }
    }}
    headerStyle={{
      backgroundColor: '#5F9CFF',
      width: 343 * densityFactor,
    }}
    headerCellStyle={{
      borderBottomWidth: 1 ,
      // borderRightWidth: 1 ,
      borderBottomColor: '#FFFFFF',
      borderRightColor: 'red',
    }}
    contentCellStyle={{
      borderBottomWidth: 1 ,
      // borderRightWidth: 1 ,
      borderBottomColor: '#FFFFFF',
      borderRightColor: '#FFFFFF',
    }}
    headerTextStyle={{
      color: 'white', // 设置表头字体颜色为白色
      fontSize: 14 , // 设置表头字体大小
    }}
    columns={ColumnsData }
    data={Data}
  />

`二、react-native-table-component`

2-1、下载

npm i react-native-table-component

2-2、使用

import {
  Table,
  TableWrapper,
  Row,
  Col,
  Cell,
} from 'react-native-table-component';

2-2-1）常用，正常表格

如图

<View style={styles.table}>
    <Table
      borderStyle={{
        borderWidth: 1 ,
        borderColor: '#FFFFFF',
      }}
      style={{
        width: 343 ,
        backgroundColor: '#E5EFFF',
      }}>
        //表头
      <Row
        data={['表头1', '表头2', '表头3']}
        style={styles.tableHeder}
        textStyle={styles.tableHeaderText}
      />
      {data.map((rowData, index) => (
        <Row
          key={index}
          data={rowData}
          textStyle={styles.tableRowText}
          style={{
            height: 45 * Height,
            //偶数排背景色'#E5EFFF'，奇数排背景色'#F2F7FF'
            backgroundColor: index % 2 == 0 ? '#E5EFFF' : '#F2F7FF',
          }}
        />
      ))}
    </Table>
  </View>

//排数据 分别对应表头
 const data= [
    ['oooo', '2222', 'Nonono'],
    ['pppp', '9999', 'yyuu'],
    ['bbb', '2234', 'olkmj'],
    ['mmmm', '666', 'rtfds'],
    ['qqqq', '555', 'kkllk'],
  ];

2-2-2）可合并单元格偶数排背景色`#E5EFFF`.奇数排背景色`#F2F7FF`

如图

//数据（每列的数据）
const colData= [
    [
      '1',
      '10',
      '25',
      '50',
      '100',
      '150',
      '200',
      '300',
      '400',
      '500',
      '600',
      '700',
      '800',
      '900',
    ],
    [
      '300',
      '600',
      '800',
      '1200',
      '1600',
      '2000',
      '2400',
      '3200',
      '4000',
      '5200',
      '5800',
      '6500',
      '7200',
      '7800',
    ],
  ];

<View style={styles.table}>
    <Table
      borderStyle={{
        borderWidth: 1 ,
        borderColor: '#FFFFFF',
      }}
      style={{
        width: 343 ,
        backgroundColor: '#E5EFFF',
      }}>
        //表头
      <Row
        data={['表头1', '表头2', '表头3']}
        style={[styles.tableHeder, {height: 44 }]}
        textStyle={[styles.tableHeaderText]}
      />
        //表格内容
      <TableWrapper
        style={{flexDirection: 'row', width: 343 }}>
          //列 （类似合并）
        <Col
          data={['yeah']}
          textStyle={[styles.tableRowText]}
          styles={{
            backgroundColor: '#E5EFFF',
            with: 126.5 ,
          }}
          heightArr={[462]}
        />
          //列
        {colData.map((rowData, index) => (
          <Col
            key={index}
              //列中每一格
            data={rowData.map((cellData, cellIndex) => (
              <Cell
                key={cellIndex}
                data={cellData}
                textStyle={styles.tableRowText}
                style={{
                  backgroundColor:
                    cellIndex % 2 == 0 ? '#E5EFFF' : '#F2F7FF',
                  height: 33 ,
                }}
              />
            ))}
            textStyle={[styles.tableRowText]}
              //列中每格的高度
            heightArr={[
              33,
              33,
              33,
              33,
              33,
              33,
              33,
              33,
              33,
              33,
              33,
              33,
              33,
              33,
            ]}
          />
        ))}
      </TableWrapper>
    </Table>
  </View>