React Native Beautiful Component

介绍

这是一个 api 类似 antd-table 的 react-native 组件库，用配置化的方式使用非常方便

功能

• 配置化的表格，提供一定的基础样式
• 支持内容全部自定义
• 支持列冻结
• 支持点击展开子内容
• 支持支持列横向竖向滚动（包括列冻结时的滚动一致性）
• 样式调整

它借用了 react-native-table-component 组件的能力，并进行了深度优化和改进 如果您对项目感兴趣，请通过电子邮件联系[email protected].

为react-native设计的表格组件.

• 安装
• 版本日志
• 示例
• 组件属性
• 注意事项
• License

Switch to English document

安装

npm install react-native-beautiful-component

USE:

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

版本日志

• [v1.0.0]
  • 组件初始化;

Examples

例一 一般使用

import React from 'react';
import { View } from 'react-native';
import BeautifulTable from 'react-native-beautiful-component';

const demoPage = () => {

  const columns = [
    {
      title: '序号',
      dataKey: 'id',
      width: 50,
    },
    {
      title: '品牌',
      dataKey: 'brand',
      flex: 1
    },
    {
      title: '手机名',
      dataKey: 'name',
      flex: 1
    },
    {
      title: '模型',
      dataKey: 'model',
      align: 'right',
      flex: 1
    }
  ]

  const data = [
    {
      brand: '小米',
      name: '小米11',
      id: '1',
      model: '128+8'
    },
    { brand: '小米', name: '小米12', id: '2', model: '256+8' },
    { brand: 'redMi', name: 'redMi 10', id: '3', model: '256+12' },
    { brand: 'redMi', name: 'redMi 超级超级豪华至尊尊享王者版', id: '4', model: '256+12' }
  ]

  return (
    <View flex={1}>
     <BeautifulTable containerStyle={{paddingHorizontal: 20}} columns={columns} data={data} />
  </View>
  )
}

例二 自定义内容 左侧列冻结

import React from 'react';
import { View, Text } from 'react-native';
import BeautifulTable from 'react-native-beautiful-component';

const demoPage = () => {

  const columns = [
    {
      title: '序号',
      dataKey: 'id',
      width: 200,
      fixed: 'left'
    },
    {
      title: <Text>品牌</Text>,
      dataKey: 'brand',
      width: 200,
    },
    {
      title: '手机名',
      dataKey: 'name',
      width: 200,
    },
    {
      title: '模型',
      dataKey: 'model',
      align: 'right',
      width: 200,
    }
  ]

  const data = [
    {
      brand: '小米',
      name: <Text style={{ fontWeight: 'bold' }}>小米11</Text>,
      id: '1',
      model: '128+8',
    },
    { brand: '小米', name: '小米12', id: '2', model: '256+8' },
    { brand: 'redMi', name: 'redMi 10', id: '3', model: '256+12' },
    { brand: 'redMi', name: 'redMi 超级超级豪华至尊尊享王者版', id: '4', model: '256+12' }
  ]

  return (
    <View flex={1}>
     <BeautifulTable columns={columns} data={data} />
  </View>
  )
}

例三 点击子列表展开

import React from 'react';
import { View, Text } from 'react-native';
import BeautifulTable from 'react-native-beautiful-component';

const demoPage = () => {

  const columns = [
    {
      title: '序号',
      dataKey: 'id',
      width: 200,
      fixed: 'left',
      render (key, item) {
        return <Text>自定义序号 {key}</Text>
      }
    },
    {
      title: <Text>品牌</Text>,
      dataKey: 'brand',
      width: 200,
    },
    {
      title: '手机名',
      dataKey: 'name',
      width: 200,
    },
    {
      title: '模型',
      dataKey: 'model',
      align: 'right',
      width: 200,
    }
  ]

  const data = [
    {
      brand: '小米',
      name: <Text style={{ fontWeight: 'bold' }}>小米11</Text>,
      id: '1',
      model: '128+8',
    },
    { brand: '小米', name: '小米12', id: '2', model: '256+8' },
    { brand: 'redMi', name: 'redMi 10', id: '3', model: '256+12' },
    { brand: 'redMi', name: 'redMi 超级超级豪华至尊尊享王者版', id: '4', model: '256+12' }
  ]

  return (
    <View flex={1}>
      <BeautifulTable
        columns={columns}
        data={data}
        isExpandShow
        contentCellStyle={{ justifyContent: 'flex-start' }}
        filterSetRowStyle={(item, index) => {
          // 控制某几项的样式
          return index === 1 && { backgroundColor: 'pink' }
        }}
        onContentRowPress={(item, index) => {
          alert('我点击了行')
        }}
        // 点击 table 后，展开子项
        expandedRender={(item, index) => {
          return (
            <BeautifulTable
              hideHeader
              columns={columns}
              data={data}
              containerStyle={{ backgroundColor: 'pink' }}
            />
          )
        }}
      />
  </View>
  )
}

组件属性

| 属性 | 类型 | 描述 | 默认值 | |---|---|---|---| | columns | ColumnItem | 组件数据 | [] | | data | object | 数据内容 | [] | | fieldKey | string | 数据唯一标识 | id | | isExpandShow | boolean | 是否默认展开拓展项 | false | | defaultExpandIndex | boolean | 默认展示的展开项索引 | |

其他信息参考 libs/index.d.ts api 描述文件，里面有详细的介绍

ColumnItem 属性

| 属性 | 类型 | 描述 | 默认值 | |---|---|---|---| | dataKey | string | 键值名称 | | | title | string | JSX.Element | 标题内容 | | | flex | number | 布局宽度占比 | 1 | | width | number | 宽度具体值 | | | align | 'left' | 'center' | 'right' | 文字对齐方式 | 'left' | | fixed | 'left' | 'right' | 列冻结 | | | render | (text: string, row: ITableDataItem, index: number) => JSX.Element | | |

注意事项

• Col和Cols里的单元格无法做到每行自适应高度
• 请在textStyle属性里设置margin值来调整内边距，不要用padding值

License

MIT