├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .prettierrc.js ├── LICENSE ├── components ├── cell.js ├── cols.js ├── rows.js └── table.js ├── index.js ├── package.json ├── readme.md ├── readme_zh.md └── utils └── index.js /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib* 3 | build 4 | 5 | example -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | "plugins": ["react", "react-native"], 8 | "extends": ["eslint:recommended", "plugin:react/recommended"], 9 | "globals": { 10 | "describe": false, 11 | "it": false, 12 | "expect": false, 13 | "beforeEach": false, 14 | "before": false, 15 | "afterEach": false, 16 | "after": false, 17 | "jest": false, 18 | "global": false 19 | }, 20 | "rules": { 21 | "quotes": ["error", "single", { "allowTemplateLiterals": true }], 22 | "semi": ["error", "always"] 23 | } 24 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode/ 3 | node_modules/ 4 | dist/ 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | example/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 120, // 换行字符串阈值 3 | semi: true, // 句末加分号 4 | singleQuote: true, // 用单引号 5 | trailingComma: 'none', // 最后一个对象元素加逗号 6 | bracketSpacing: true, // 对象，数组加空格 7 | jsxBracketSameLine: false, // jsx > 是否另起一行 8 | arrowParens: 'avoid', // (x) => {} 是否要有小括号 9 | requirePragma: false, // 是否要注释来决定是否格式化代码 10 | proseWrap: 'preserve' // 是否要换行 11 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 鸡斯拉 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/cell.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, Text, StyleSheet } from 'react-native'; 4 | 5 | export class Cell extends Component { 6 | static propTypes = { 7 | style: PropTypes.object, 8 | textStyle: PropTypes.object, 9 | borderStyle: PropTypes.object 10 | }; 11 | 12 | render() { 13 | const { data, width, height, flex, style, textStyle, borderStyle, ...props } = this.props; 14 | const textDom = React.isValidElement(data) ? ( 15 | data 16 | ) : ( 17 | 18 | {data} 19 | 20 | ); 21 | const borderTopWidth = (borderStyle && borderStyle.borderWidth) || 0; 22 | const borderRightWidth = borderTopWidth; 23 | const borderColor = (borderStyle && borderStyle.borderColor) || '#000'; 24 | 25 | return ( 26 | 41 | {textDom} 42 | 43 | ); 44 | } 45 | } 46 | 47 | const styles = StyleSheet.create({ 48 | cell: { justifyContent: 'center' }, 49 | text: { backgroundColor: 'transparent' } 50 | }); -------------------------------------------------------------------------------- /components/cols.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, Text, StyleSheet } from 'react-native'; 4 | import { Cell } from './cell'; 5 | import { sum } from '../utils'; 6 | 7 | export class Col extends Component { 8 | static propTypes = { 9 | width: PropTypes.number, 10 | style: PropTypes.object, 11 | textStyle: PropTypes.object 12 | }; 13 | 14 | render() { 15 | const { data, style, width, heightArr, flex, textStyle, ...props } = this.props; 16 | 17 | return data ? ( 18 | 19 | {data.map((item, i) => { 20 | const height = heightArr && heightArr[i]; 21 | return ; 22 | })} 23 | 24 | ) : null; 25 | } 26 | } 27 | 28 | export class Cols extends Component { 29 | static propTypes = { 30 | style: PropTypes.object, 31 | textStyle: PropTypes.object 32 | }; 33 | 34 | render() { 35 | const { data, style, widthArr, heightArr, flexArr, textStyle, ...props } = this.props; 36 | let width = widthArr ? sum(widthArr) : 0; 37 | 38 | return data ? ( 39 | 40 | {data.map((item, i) => { 41 | const flex = flexArr && flexArr[i]; 42 | const wth = widthArr && widthArr[i]; 43 | return ( 44 | 54 | ); 55 | })} 56 | 57 | ) : null; 58 | } 59 | } 60 | 61 | const styles = StyleSheet.create({ 62 | cols: { flexDirection: 'row' } 63 | }); 64 | -------------------------------------------------------------------------------- /components/rows.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, Text, StyleSheet } from 'react-native'; 4 | import { Cell } from './cell'; 5 | import { sum } from '../utils'; 6 | 7 | export class Row extends Component { 8 | static propTypes = { 9 | style: PropTypes.object, 10 | textStyle: PropTypes.object 11 | }; 12 | 13 | render() { 14 | const { data, style, widthArr, height, flexArr, textStyle, cellTextStyle, ...props } = this.props; 15 | let width = widthArr ? sum(widthArr) : 0; 16 | 17 | return data ? ( 18 | 19 | {data.map((item, i) => { 20 | const flex = flexArr && flexArr[i]; 21 | const wth = widthArr && widthArr[i]; 22 | return ( 23 | 32 | ); 33 | })} 34 | 35 | ) : null; 36 | } 37 | } 38 | 39 | export class Rows extends Component { 40 | static propTypes = { 41 | style: PropTypes.object, 42 | textStyle: PropTypes.object 43 | }; 44 | 45 | render() { 46 | const { data, style, widthArr, heightArr, flexArr, textStyle, ...props } = this.props; 47 | const flex = flexArr ? sum(flexArr) : 0; 48 | const width = widthArr ? sum(widthArr) : 0; 49 | 50 | return data ? ( 51 | 52 | {data.map((item, i) => { 53 | const height = heightArr && heightArr[i]; 54 | return ( 55 | 65 | ); 66 | })} 67 | 68 | ) : null; 69 | } 70 | } 71 | 72 | const styles = StyleSheet.create({ 73 | row: { 74 | flexDirection: 'row', 75 | overflow: 'hidden' 76 | } 77 | }); -------------------------------------------------------------------------------- /components/table.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View } from 'react-native'; 4 | 5 | export class Table extends Component { 6 | static propTypes = { 7 | style: PropTypes.object, 8 | borderStyle: PropTypes.object 9 | }; 10 | 11 | _renderChildren(props) { 12 | return React.Children.map(props.children, child => 13 | React.cloneElement( 14 | child, 15 | props.borderStyle && child.type.displayName !== 'ScrollView' ? { borderStyle: props.borderStyle } : {} 16 | ) 17 | ); 18 | } 19 | 20 | render() { 21 | const { borderStyle } = this.props; 22 | const borderLeftWidth = (borderStyle && borderStyle.borderWidth) || 0; 23 | const borderBottomWidth = borderLeftWidth; 24 | const borderColor = (borderStyle && borderStyle.borderColor) || '#000'; 25 | 26 | return ( 27 | 37 | {this._renderChildren(this.props)} 38 | 39 | ); 40 | } 41 | } 42 | 43 | export class TableWrapper extends Component { 44 | static propTypes = { 45 | style: PropTypes.object 46 | }; 47 | 48 | _renderChildren(props) { 49 | return React.Children.map(props.children, child => 50 | React.cloneElement(child, props.borderStyle ? { borderStyle: props.borderStyle } : {}) 51 | ); 52 | } 53 | 54 | render() { 55 | const { style } = this.props; 56 | return {this._renderChildren(this.props)}; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export { Row, Rows } from './components/rows'; 2 | export { Col, Cols } from './components/cols'; 3 | export { Table, TableWrapper } from './components/table'; 4 | export { Cell } from './components/cell'; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-table-component", 3 | "version": "1.2.1", 4 | "description": "Build table for react native.", 5 | "main": "index.js", 6 | "scripts": { 7 | "lint": "eslint .", 8 | "prettify": "prettier --write components/**/*.js utils/**/*.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/Gil2015/react-native-table-component.git" 13 | }, 14 | "keywords": [ 15 | "react-native", 16 | "table", 17 | "react-native-cell", 18 | "react-native-table", 19 | "react-native-table-component" 20 | ], 21 | "author": "gil2015", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/Gil2015/react-native-table-component/issues" 25 | }, 26 | "homepage": "https://github.com/Gil2015/react-native-table-component#readme", 27 | "devDependencies": { 28 | "babel-eslint": "^10.0.1", 29 | "eslint": "^5.10.0", 30 | "eslint-plugin-react": "^7.11.1", 31 | "eslint-plugin-react-native": "^3.5.0", 32 | "prettier": "^1.15.3", 33 | "react": "^16.7.0", 34 | "react-native": "^0.57.8" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

⚠️ This Repository is No Longer Maintained ⚠️

2 | 3 | 🔴 Attention: This repository is no longer being actively maintained or updated. The development has shifted to another GitHub repository. We encourage you to check out the new repository for the latest features and improvements. Thank you for your understanding and support! 🙌. 4 | 5 | 🙏 A big thank you to [Gil2015](https://github.com/Gil2015), the original author, for their tremendous efforts and contributions to this project! 6 | 7 | 🔗 New Repository: [react-native-reanimated-table](https://github.com/dohooo/react-native-reanimated-table) 8 | 9 | 🚀 In the new repository, we will be working on creating a high-performance table component using Reanimated. The API will initially be compatible with this project, but it will change completely after version 0.1.0. Please be patient and stay tuned for updates! 10 | 11 | We're excited about the new direction we're taking, and we hope you'll join us there! Happy coding! 💻😄 12 | 13 | --- 14 |

15 | 16 |

17 | 18 |

React Native Table Component

19 | 20 |

21 | 22 | 23 | 24 |

25 | 26 |

* The project is no longer maintained due to work reasons and can be transferred if necessary.

27 |

If you are interested in maintaining the project, please contact the email 594244274@qq.com.

28 |

29 | 30 | This is a table component for react native. 31 | 32 | - [Installation](#installation) 33 | - [Changelogs](#changelogs) 34 | - [Examples](#examples) 35 | - [Properties](#properties) 36 | - [Notice](#notice) 37 | - [License](#license) 38 | 39 | [切换到中文文档](https://github.com/Gil2015/react-native-table-component/blob/master/readme_zh.md) 40 |

41 | 42 | ## Installation 43 | > npm install react-native-table-component 44 | 45 | `USE:` 46 | ```jsx 47 | import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component'; 48 | ``` 49 | 50 | 51 | 52 |

53 | 54 | ## Changelogs 55 | + [v1.0.3] 56 | - 'TableWraper' changed to 'TableWrapper'; 57 | + [v1.1.1] 58 | - Data supports incoming Element types 59 | + [v1.2.1] 60 | - Change the default value of the borderWidth from 1 to 0 61 |

62 | 63 | ## Examples 64 | 65 | #### Example1 66 | 67 | 68 | ```jsx 69 | import React, { Component } from 'react'; 70 | import { StyleSheet, View } from 'react-native'; 71 | import { Table, Row, Rows } from 'react-native-table-component'; 72 | 73 | export default class ExampleOne extends Component { 74 | constructor(props) { 75 | super(props); 76 | this.state = { 77 | tableHead: ['Head', 'Head2', 'Head3', 'Head4'], 78 | tableData: [ 79 | ['1', '2', '3', '4'], 80 | ['a', 'b', 'c', 'd'], 81 | ['1', '2', '3', '456\n789'], 82 | ['a', 'b', 'c', 'd'] 83 | ] 84 | } 85 | } 86 | 87 | render() { 88 | const state = this.state; 89 | return ( 90 | 91 | 92 | 93 | 94 |
95 | 96 | ) 97 | } 98 | } 99 | 100 | const styles = StyleSheet.create({ 101 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 102 | head: { height: 40, backgroundColor: '#f1f8ff' }, 103 | text: { margin: 6 } 104 | }); 105 | ``` 106 | 107 | --- 108 | 109 | #### Example2 110 | 111 | 112 | ```jsx 113 | import React, { Component } from 'react'; 114 | import { StyleSheet, View } from 'react-native'; 115 | import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component'; 116 | 117 | export default class ExampleTwo extends Component { 118 | constructor(props) { 119 | super(props); 120 | this.state = { 121 | tableHead: ['', 'Head1', 'Head2', 'Head3'], 122 | tableTitle: ['Title', 'Title2', 'Title3', 'Title4'], 123 | tableData: [ 124 | ['1', '2', '3'], 125 | ['a', 'b', 'c'], 126 | ['1', '2', '3'], 127 | ['a', 'b', 'c'] 128 | ] 129 | } 130 | } 131 | 132 | render() { 133 | const state = this.state; 134 | return ( 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
143 | 144 | ) 145 | } 146 | } 147 | 148 | const styles = StyleSheet.create({ 149 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 150 | head: { height: 40, backgroundColor: '#f1f8ff' }, 151 | wrapper: { flexDirection: 'row' }, 152 | title: { flex: 1, backgroundColor: '#f6f8fa' }, 153 | row: { height: 28 }, 154 | text: { textAlign: 'center' } 155 | }); 156 | ``` 157 | 158 | --- 159 | 160 | #### Example3 161 | 162 | 163 | ```jsx 164 | import React, { Component } from 'react'; 165 | import { StyleSheet, View, ScrollView } from 'react-native'; 166 | import { Table, TableWrapper, Row } from 'react-native-table-component'; 167 | 168 | export default class ExampleThree extends Component { 169 | constructor(props) { 170 | super(props); 171 | this.state = { 172 | tableHead: ['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8', 'Head9'], 173 | widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200] 174 | } 175 | } 176 | 177 | render() { 178 | const state = this.state; 179 | const tableData = []; 180 | for (let i = 0; i < 30; i += 1) { 181 | const rowData = []; 182 | for (let j = 0; j < 9; j += 1) { 183 | rowData.push(`${i}${j}`); 184 | } 185 | tableData.push(rowData); 186 | } 187 | 188 | return ( 189 | 190 | 191 | 192 | 193 | 194 |
195 | 196 | 197 | { 198 | tableData.map((rowData, index) => ( 199 | 206 | )) 207 | } 208 |
209 | 210 | 211 | 212 | 213 | ) 214 | } 215 | } 216 | 217 | const styles = StyleSheet.create({ 218 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 219 | header: { height: 50, backgroundColor: '#537791' }, 220 | text: { textAlign: 'center', fontWeight: '100' }, 221 | dataWrapper: { marginTop: -1 }, 222 | row: { height: 40, backgroundColor: '#E7E6E1' } 223 | }); 224 | ``` 225 | 226 | --- 227 | 228 | #### Example4 229 | 230 | 231 | ```jsx 232 | import React, { Component } from 'react'; 233 | import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native'; 234 | import { Table, TableWrapper, Row, Cell } from 'react-native-table-component'; 235 | 236 | export default class ExampleFour extends Component { 237 | constructor(props) { 238 | super(props); 239 | this.state = { 240 | tableHead: ['Head', 'Head2', 'Head3', 'Head4'], 241 | tableData: [ 242 | ['1', '2', '3', '4'], 243 | ['a', 'b', 'c', 'd'], 244 | ['1', '2', '3', '4'], 245 | ['a', 'b', 'c', 'd'] 246 | ] 247 | } 248 | } 249 | 250 | _alertIndex(index) { 251 | Alert.alert(`This is row ${index + 1}`); 252 | } 253 | 254 | render() { 255 | const state = this.state; 256 | const element = (data, index) => ( 257 | this._alertIndex(index)}> 258 | 259 | button 260 | 261 | 262 | ); 263 | 264 | return ( 265 | 266 | 267 | 268 | { 269 | state.tableData.map((rowData, index) => ( 270 | 271 | { 272 | rowData.map((cellData, cellIndex) => ( 273 | 274 | )) 275 | } 276 | 277 | )) 278 | } 279 |
280 | 281 | ) 282 | } 283 | } 284 | 285 | const styles = StyleSheet.create({ 286 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 287 | head: { height: 40, backgroundColor: '#808B97' }, 288 | text: { margin: 6 }, 289 | row: { flexDirection: 'row', backgroundColor: '#FFF1C1' }, 290 | btn: { width: 58, height: 18, backgroundColor: '#78B7BB', borderRadius: 2 }, 291 | btnText: { textAlign: 'center', color: '#fff' } 292 | }); 293 | ``` 294 | 295 | --- 296 | 297 | #### Example5 298 | 299 | 300 | ```jsx 301 | import React, { Component } from 'react'; 302 | import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native'; 303 | import { Table, TableWrapper,Col, Cols, Cell } from 'react-native-table-component'; 304 | 305 | export default class ExampleFive extends Component { 306 | constructor(props) { 307 | super(props); 308 | const elementButton = (value) => ( 309 | this._alertIndex(value)}> 310 | 311 | button 312 | 313 | 314 | ); 315 | 316 | this.state = { 317 | tableTitle: ['Title', 'Title2', 'Title3', 'Title4'], 318 | tableData: [ 319 | [elementButton('1'), 'a', 'b', 'c', 'd'], 320 | [elementButton('2'), '1', '2', '3', '4'], 321 | [elementButton('3'), 'a', 'b', 'c', 'd'] 322 | ] 323 | } 324 | } 325 | 326 | _alertIndex(value) { 327 | Alert.alert(`This is column ${value}`); 328 | } 329 | 330 | render() { 331 | const state = this.state; 332 | return ( 333 | 334 | 335 | {/* Left Wrapper */} 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | {/* Right Wrapper */} 345 | 346 | 347 | 348 |
349 | 350 | ) 351 | } 352 | } 353 | 354 | const styles = StyleSheet.create({ 355 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 356 | singleHead: { width: 80, height: 40, backgroundColor: '#c8e1ff' }, 357 | head: { flex: 1, backgroundColor: '#c8e1ff' }, 358 | title: { flex: 2, backgroundColor: '#f6f8fa' }, 359 | titleText: { marginRight: 6, textAlign:'right' }, 360 | text: { textAlign: 'center' }, 361 | btn: { width: 58, height: 18, marginLeft: 15, backgroundColor: '#c8e1ff', borderRadius: 2 }, 362 | btnText: { textAlign: 'center' } 363 | }); 364 | ``` 365 | 366 | --- 367 | 368 | 369 | 370 |

371 | 372 | ## Properties 373 | | Prop | Type | Description | Default | 374 | |---|---|---|---| 375 | | data | Array | Table data. | `null` | 376 | | style | Style | Container style. | `null` | 377 | | borderStyle| Object| Table border line width and color. | `{ borderWidth: 0, borderColor: #000 }` | 378 | | textStyle | Style | Cell font style. | `null` | 379 | | flexArr | Array | Flex value per column. | `[]` | 380 | | widthArr | Array | Width per column. | `[]` | 381 | | heightArr | Array | Height per line. | `[]` | 382 | | ...props | any   | more props | | 383 | --- 384 | 385 | 386 | 387 |

388 | 389 | ## Notice 390 | 391 | + Cells in Col and Cols components do not support adaptive height. 392 | + Please set the magin value in the textStyle property to adjust the padding and do not use the padding. 393 | + If parent element is not Table component，please add the type of borderstyle. 394 | 395 | ```jsx 396 | 397 | {/* If parent element is not Table component，please add the type of borderstyle. */} 398 | 399 | 400 | 401 | 402 | ``` 403 | 404 | ## License 405 | 406 | [MIT](LICENSE) 407 | -------------------------------------------------------------------------------- /readme_zh.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

React Native Table Component

6 | 7 |

8 | 9 | 10 | 11 |

12 | 13 |

* 由于工作原因该项目不再维护，如有需要可以转让

14 |

如果您对项目感兴趣，请通过电子邮件联系594244274@qq.com.

15 | 16 |

17 | 18 | 为react-native设计的表格组件. 19 | 20 | - [安装](#安装) 21 | - [版本日志](#版本日志) 22 | - [示例](#示例) 23 | - [组件属性](#组件属性) 24 | - [注意事项](#注意事项) 25 | - [License](#license) 26 | 27 | [Switch to English document](https://github.com/Gil2015/react-native-table-component#Changelogs) 28 |

29 | 30 | ## 安装 31 | > npm install react-native-table-component 32 | 33 | `USE:` 34 | ```jsx 35 | import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component'; 36 | ``` 37 | 38 | 39 | 40 |

41 | 42 | ## 版本日志 43 | + [v1.0.3] 44 | - 组件名 'TableWraper' 改为 'TableWrapper'; 45 | + [v1.1.1] 46 | - data属性内可以插入自定义组件 47 | + [v1.2.1] 48 | - borderWidth默认值从1改为0 49 |

50 | 51 | ## Examples 52 | 53 | #### 例一 54 | 55 | 56 | ```jsx 57 | import React, { Component } from 'react'; 58 | import { StyleSheet, View } from 'react-native'; 59 | import { Table, Row, Rows } from 'react-native-table-component'; 60 | 61 | export default class ExampleOne extends Component { 62 | constructor(props) { 63 | super(props); 64 | this.state = { 65 | tableHead: ['Head', 'Head2', 'Head3', 'Head4'], 66 | tableData: [ 67 | ['1', '2', '3', '4'], 68 | ['a', 'b', 'c', 'd'], 69 | ['1', '2', '3', '456\n789'], 70 | ['a', 'b', 'c', 'd'] 71 | ] 72 | } 73 | } 74 | 75 | render() { 76 | const state = this.state; 77 | return ( 78 | 79 | 80 | 81 | 82 |
83 | 84 | ) 85 | } 86 | } 87 | 88 | const styles = StyleSheet.create({ 89 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 90 | head: { height: 40, backgroundColor: '#f1f8ff' }, 91 | text: { margin: 6 } 92 | }); 93 | ``` 94 | 95 | --- 96 | 97 | #### 例二 98 | 99 | 100 | ```jsx 101 | import React, { Component } from 'react'; 102 | import { StyleSheet, View } from 'react-native'; 103 | import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component'; 104 | 105 | export default class ExampleTwo extends Component { 106 | constructor(props) { 107 | super(props); 108 | this.state = { 109 | tableHead: ['', 'Head1', 'Head2', 'Head3'], 110 | tableTitle: ['Title', 'Title2', 'Title3', 'Title4'], 111 | tableData: [ 112 | ['1', '2', '3'], 113 | ['a', 'b', 'c'], 114 | ['1', '2', '3'], 115 | ['a', 'b', 'c'] 116 | ] 117 | } 118 | } 119 | 120 | render() { 121 | const state = this.state; 122 | return ( 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
131 | 132 | ) 133 | } 134 | } 135 | 136 | const styles = StyleSheet.create({ 137 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 138 | head: { height: 40, backgroundColor: '#f1f8ff' }, 139 | wrapper: { flexDirection: 'row' }, 140 | title: { flex: 1, backgroundColor: '#f6f8fa' }, 141 | row: { height: 28 }, 142 | text: { textAlign: 'center' } 143 | }); 144 | ``` 145 | 146 | --- 147 | 148 | #### 例三 149 | 150 | 151 | ```jsx 152 | import React, { Component } from 'react'; 153 | import { StyleSheet, View, ScrollView } from 'react-native'; 154 | import { Table, TableWrapper, Row } from 'react-native-table-component'; 155 | 156 | export default class ExampleThree extends Component { 157 | constructor(props) { 158 | super(props); 159 | this.state = { 160 | tableHead: ['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8', 'Head9'], 161 | widthArr: [40, 60, 80, 100, 120, 140, 160, 180, 200] 162 | } 163 | } 164 | 165 | render() { 166 | const state = this.state; 167 | const tableData = []; 168 | for (let i = 0; i < 30; i += 1) { 169 | const rowData = []; 170 | for (let j = 0; j < 9; j += 1) { 171 | rowData.push(`${i}${j}`); 172 | } 173 | tableData.push(rowData); 174 | } 175 | 176 | return ( 177 | 178 | 179 | 180 | 181 | 182 |
183 | 184 | 185 | { 186 | tableData.map((rowData, index) => ( 187 | 194 | )) 195 | } 196 |
197 | 198 | 199 | 200 | 201 | ) 202 | } 203 | } 204 | 205 | const styles = StyleSheet.create({ 206 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 207 | header: { height: 50, backgroundColor: '#537791' }, 208 | text: { textAlign: 'center', fontWeight: '100' }, 209 | dataWrapper: { marginTop: -1 }, 210 | row: { height: 40, backgroundColor: '#E7E6E1' } 211 | }); 212 | ``` 213 | 214 | --- 215 | 216 | #### 例四 217 | 218 | 219 | ```jsx 220 | import React, { Component } from 'react'; 221 | import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native'; 222 | import { Table, TableWrapper, Row, Cell } from 'react-native-table-component'; 223 | 224 | export default class ExampleFour extends Component { 225 | constructor(props) { 226 | super(props); 227 | this.state = { 228 | tableHead: ['Head', 'Head2', 'Head3', 'Head4'], 229 | tableData: [ 230 | ['1', '2', '3', '4'], 231 | ['a', 'b', 'c', 'd'], 232 | ['1', '2', '3', '4'], 233 | ['a', 'b', 'c', 'd'] 234 | ] 235 | } 236 | } 237 | 238 | _alertIndex(index) { 239 | Alert.alert(`This is row ${index + 1}`); 240 | } 241 | 242 | render() { 243 | const state = this.state; 244 | const element = (data, index) => ( 245 | this._alertIndex(index)}> 246 | 247 | button 248 | 249 | 250 | ); 251 | 252 | return ( 253 | 254 | 255 | 256 | { 257 | state.tableData.map((rowData, index) => ( 258 | 259 | { 260 | rowData.map((cellData, cellIndex) => ( 261 | 262 | )) 263 | } 264 | 265 | )) 266 | } 267 |
268 | 269 | ) 270 | } 271 | } 272 | 273 | const styles = StyleSheet.create({ 274 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 275 | head: { height: 40, backgroundColor: '#808B97' }, 276 | text: { margin: 6 }, 277 | row: { flexDirection: 'row', backgroundColor: '#FFF1C1' }, 278 | btn: { width: 58, height: 18, backgroundColor: '#78B7BB', borderRadius: 2 }, 279 | btnText: { textAlign: 'center', color: '#fff' } 280 | }); 281 | ``` 282 | 283 | --- 284 | 285 | #### 例五 286 | 287 | 288 | ```jsx 289 | import React, { Component } from 'react'; 290 | import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native'; 291 | import { Table, TableWrapper,Col, Cols, Cell } from 'react-native-table-component'; 292 | 293 | export default class ExampleFive extends Component { 294 | constructor(props) { 295 | super(props); 296 | const elementButton = (value) => ( 297 | this._alertIndex(value)}> 298 | 299 | button 300 | 301 | 302 | ); 303 | 304 | this.state = { 305 | tableTitle: ['Title', 'Title2', 'Title3', 'Title4'], 306 | tableData: [ 307 | [elementButton('1'), 'a', 'b', 'c', 'd'], 308 | [elementButton('2'), '1', '2', '3', '4'], 309 | [elementButton('3'), 'a', 'b', 'c', 'd'] 310 | ] 311 | } 312 | } 313 | 314 | _alertIndex(value) { 315 | Alert.alert(`This is column ${value}`); 316 | } 317 | 318 | render() { 319 | const state = this.state; 320 | return ( 321 | 322 | 323 | {/* 左边模块 */} 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | {/* 右边模块 */} 333 | 334 | 335 | 336 |
337 | 338 | ) 339 | } 340 | } 341 | 342 | const styles = StyleSheet.create({ 343 | container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' }, 344 | singleHead: { width: 80, height: 40, backgroundColor: '#c8e1ff' }, 345 | head: { flex: 1, backgroundColor: '#c8e1ff' }, 346 | title: { flex: 2, backgroundColor: '#f6f8fa' }, 347 | titleText: { marginRight: 6, textAlign:'right' }, 348 | text: { textAlign: 'center' }, 349 | btn: { width: 58, height: 18, marginLeft: 15, backgroundColor: '#c8e1ff', borderRadius: 2 }, 350 | btnText: { textAlign: 'center' } 351 | }); 352 | ``` 353 | 354 | --- 355 | 356 | 357 | 358 |

359 | 360 | ## 组件属性 361 | | 属性 | 类型 | 描述 | 默认值 | 362 | |---|---|---|---| 363 | | data | Array | 组件数据 | `null` | 364 | | style | Style | 组件style样式 | `null` | 365 | | borderStyle| Object| 表格边框样式 | `{ borderWidth: 0, borderColor: #000 }` | 366 | | textStyle | Style | 子项文字样式 | `null` | 367 | | flexArr | Array | 每列的flex值 | `[]` | 368 | | widthArr | Array | 每列的宽度值 | `[]` | 369 | | heightArr | Array | 每行的高度值 | `[]` | 370 | | ...props   | any   | 更多其它属性 |     | 371 | 372 | --- 373 | 374 | 375 | 376 |

377 | 378 | ## 注意事项 379 | 380 | + Col和Cols里的单元格无法做到每行自适应高度 381 | + 请在textStyle属性里设置margin值来调整内边距，不要用padding值 382 | + 如果父元素不是Table组件，需要设置borderStyle属性 383 | 384 | ```jsx 385 | 386 | {/* 如果父元素不是Table组件，需要设置borderStyle属性 */} 387 | 388 | 389 | 390 | 391 | ``` 392 | 393 | ## License 394 | 395 | [MIT](LICENSE) 396 | -------------------------------------------------------------------------------- /utils/index.js: -------------------------------------------------------------------------------- 1 | export const sum = arr => arr.reduce((acc, n) => acc + n, 0); 2 | --------------------------------------------------------------------------------