React Native Table Component 使用教程

React Native Table Component 使用教程

react-native-table-component🌱Build table for react native项目地址:https://gitcode.com/gh_mirrors/re/react-native-table-component

1. 项目的目录结构及介绍

react-native-table-component/
├── android/
├── ios/
├── src/
│   ├── components/
│   │   ├── Table.js
│   │   ├── TableWrapper.js
│   │   ├── Row.js
│   │   ├── Rows.js
│   │   ├── Col.js
│   │   ├── Cols.js
│   │   ├── Cell.js
│   │   └── index.js
│   └── index.js
├── .eslintrc.js
├── .flowconfig
├── .gitattributes
├── .gitignore
├── .npmignore
├── README.md
├── index.js
├── package-lock.json
├── package.json
└── react-native-table-component.podspec

目录结构介绍

• android/ 和 ios/：包含Android和iOS的原生代码。
• src/：项目的源代码目录。
  • components/：包含表格组件的各个部分，如Table, TableWrapper, Row, Rows, Col, Cols, Cell等。
  • index.js：组件的入口文件。
• .eslintrc.js, .flowconfig, .gitattributes, .gitignore, .npmignore：配置文件。
• README.md：项目说明文档。
• index.js：项目的入口文件。
• package-lock.json 和 package.json：依赖管理文件。
• react-native-table-component.podspec：iOS的CocoaPods配置文件。

2. 项目的启动文件介绍

项目的启动文件是index.js，它导入了src目录下的组件，并提供了对外的接口。

// index.js
import {
  Table,
  TableWrapper,
  Row,
  Rows,
  Col,
  Cols,
  Cell
} from './src/components';

export {
  Table,
  TableWrapper,
  Row,
  Rows,
  Col,
  Cols,
  Cell
};

3. 项目的配置文件介绍

package.json

package.json文件包含了项目的基本信息和依赖项。

{
  "name": "react-native-table-component",
  "version": "1.0.0",
  "description": "A react native library to display table.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "table",
    "component"
  ],
  "author": "dohooo",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.2",
    "react-native": "^0.64.2"
  }
}

.eslintrc.js

eslint配置文件，用于代码风格检查。

module.exports = {
  "extends": "react-app",
  "rules": {
    // 自定义规则
  }
}

.flowconfig

flow配置文件，用于类型检查。

[options]
module.name_mapper='^react-native$' -> 'react-native-web'

.gitattributes

gitattributes配置文件，用于设置文件的属性。

* text=auto

.gitignore

gitignore配置文件，用于忽略不需要版本控制的文件。

node_modules/
.DS_Store

.npmignore

npmignore配置文件，用于发布到npm时忽略的文件。

android/
ios/

react-native-table-component.podspec

podspec配置文件，用于iOS的CocoaPods依赖管理。

Pod::Spec.new do |s|
  s.name             = 'react-native-table-component'
  s.version          = '1.0.0'
  s.summary          = 'A react native library to display table.'
 

react-native-table-component🌱Build table for react native项目地址:https://gitcode.com/gh_mirrors/re/react-native-table-component