https://github.com/nu-system/react-native-grid
NU 「 no-ui 」 组件库系统 nu-system，Grid 组件 React native 实现
https://github.com/nu-system/react-native-grid
grid grid-react-native react-native-components ui-components
Last synced: 26 days ago
JSON representation
NU 「 no-ui 」 组件库系统 nu-system，Grid 组件 React native 实现
- Host: GitHub
- URL: https://github.com/nu-system/react-native-grid
- Owner: nu-system
- Created: 2019-06-25T06:50:42.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-30T10:31:18.000Z (almost 6 years ago)
- Last Synced: 2025-04-19T00:34:45.321Z (about 1 month ago)
- Topics: grid, grid-react-native, react-native-components, ui-components
- Language: JavaScript
- Homepage: https://nu-system.github.io/react-native/grid/
- Size: 14.6 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# nu-react-native-grid
[![npm package][npm-badge]][npm]
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/@_nu/react-native-grid
这是 NU 「 no-ui 」 组件库系统 nu-system，Grid 组件 React-native 实现。
## 怎么用？
```
yarn add @_nu/react-native-grid
```
### 二次封装
```JSX
import React from 'react';
import Grid from '@_nu/react-native-grid';
const {Row, Col, Wrap} = new Grid({
gridNum: 6, // 列数
gutterInside: 12, // 内间距宽
gutterOutSide: 16 // 外间距宽
});
export default Grid;
export {Row, Col, Wrap};
```
### 使用
```JSX
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Row, Col, Wrap} from "./components/Grid/index.js";
export default function App() {
return (
Hello world
Open up App.js to start
1
2
3
4
5
6
Hello1
Hello2
Hello1
Hello1
Hello1
Hello1
Hello1
Hello2
);
}
```
### Api `Grid`
| props | 类型 | 默认值 | 功能 |
|:----------|:-------------:|:-------------:|------:|
| gridNum | number | `6` | 列数 |
| gutterInside | number | `12` | 列之间的间距 |
| gutterOutSide | number | `16` | 列距离屏幕边缘的间距 |
### Api `Col`
| props | 类型 | 默认值 | 功能 |
|:----------|:-------------:|:-------------:|------:|
| span | number | `1` | 所占的列数 |
| offset | number | `0` | 偏移的列数 |
| widthToInt | bool | `false` | 是否单位采用整数，默认是采用百分比 |