{"_id":"@_nu/react-native-grid","_rev":"2-527f769cfa24b21875259e13132e9f9b","name":"@_nu/react-native-grid","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@_nu/react-native-grid","version":"0.0.1","description":"NU 「 no-ui 」 组件库系统 nu-system，Grid 组件 React native 实现","main":"lib/index.js","directories":{"lib":"lib"},"author":{"name":"yfe-team"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/nu-system/react-native-grid.git"},"bugs":{"url":"https://github.com/nu-system/react-native-grid/issues"},"homepage":"https://nu-system.github.io/react-native/grid/","keywords":["grid","nu-systeam"],"peerDependencies":{"react":"16.5.0","react-native":"^0.57.7"},"gitHead":"0edc93b50de3a00356196a25c07d80aa12aece72","_id":"@_nu/react-native-grid@0.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-XmP22nGFpa3d/AF/Nx53VlYSzScLBsiHTQrzjVMrV+iRiTpIY1z99e3ysrRVx5i3tF7VVujWUP8SHfCCdFQs4Q==","shasum":"5645e0528efbcf9d0a88a09231ab9d2c4075ae7a","tarball":"https://registry.npmjs.org/@_nu/react-native-grid/-/react-native-grid-0.0.1.tgz","fileCount":4,"unpackedSize":18223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGI99CRA9TVsSAnZWagAA46AP/RIJTdPh4tkQSuwxQbSE\nN2ZsNoRdlNG9UtMrBd4tydYzPJgye7h/AhcsHzZWwnnDdhv5KCY1jOjkfPHA\nZY3knyZROF6cNj8/+fqisjz2iC0MbM6ncYppUVqQgiIb8RHOnRNaPy61hR0K\nzfDtP/tkTjdyvthHS0SOWrkjUdblxVBaXBiMN7YuFO5x7uhDnXeDby74PN8a\ncID6TY2LHQCuHzrc7d4WP4gneEZeF619kMkVbaTzn00ETMOqhiRrET0bsuHB\nPLjdF+VDT19WicxjOeLvKXD8CLlxiCBfidGWihXw1OfRDPSgnN9EB23UXV/S\ngGYDe2wOYVtcR9Kxr4olXBqORhCJqU7WArM0JpJAcGitEVq9igdsIw/6gxBe\ngFmLPWyjek1IaO69DH2r6FNX6E/+EeueilZDsh7obox8vU6EyEeMKWZkvOrl\nKtztjsZE/KZOPUepc7APCO3ol6pDpuzBeYHQnnkITQkTmHHFf2BzwjMPK6Rz\ntIWgkTj7Ndxt/v50LjsWF1KiSMCMbgDvL34UHUT+SY/S6dyXFW49o+X/3Ird\nt9d28krwkdVbOGuUuXK5EPl1w4yRHk3r6Kf8JH+pFTGeSASG+rEeGMUapv+k\nGBGvXJuQr5aMXE1vy8GHpLRxU2qSiRJjJhAknslIzUIqUoUCzFaEvG3LQC8a\nM361\r\n=3vpO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYn0vrZJ77sdfxmgFs2OMTTYtdhX7MdCiqDCQgjhj07wIhALwnKC8mDiOqaUKX+Gi1tyPAR7a8Kf1/9UyfQZRNU3HO"}]},"maintainers":[{"name":"ziven27","email":"ziven27@qq.com"}],"_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-grid_0.0.1_1561890684135_0.00829610094202482"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-30T10:31:23.880Z","0.0.1":"2019-06-30T10:31:24.319Z","modified":"2022-04-04T10:51:38.367Z"},"maintainers":[{"email":"1128yeye@sina.com","name":"nanasun"},{"email":"ziven27@qq.com","name":"ziven27"}],"description":"NU 「 no-ui 」 组件库系统 nu-system，Grid 组件 React native 实现","homepage":"https://nu-system.github.io/react-native/grid/","keywords":["grid","nu-systeam"],"repository":{"type":"git","url":"git+ssh://git@github.com/nu-system/react-native-grid.git"},"author":{"name":"yfe-team"},"bugs":{"url":"https://github.com/nu-system/react-native-grid/issues"},"license":"MIT","readme":"# nu-react-native-grid\n\n[![npm package][npm-badge]][npm]\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/@_nu/react-native-grid\n\n这是 NU 「 no-ui 」 组件库系统 nu-system，Grid 组件 React-native 实现。\n\n## 怎么用？\n\n```\nyarn add @_nu/react-native-grid\n```\n\n### 二次封装\n\n```JSX\nimport React from 'react';\nimport Grid from '@_nu/react-native-grid';\n\nconst {Row, Col, Wrap} = new Grid({\n    gridNum: 6,            // 列数\n    gutterInside: 12,      // 内间距宽\n    gutterOutSide: 16      // 外间距宽\n});\n\nexport default Grid;\nexport {Row, Col, Wrap};\n```\n\n### 使用\n\n```JSX\nimport React from 'react';\nimport {StyleSheet, Text, View} from 'react-native';\nimport {Row, Col, Wrap} from \"./components/Grid/index.js\";\n\nexport default function App() {\n    return (\n        <View>\n            <Text>Hello world</Text>\n            <Wrap>\n                <Text style={styles.col}>Open up App.js to start</Text>\n            </Wrap>\n            <Row>\n                <Col span={1}><Text style={styles.col}>1</Text></Col>\n                <Col span={1}><Text style={styles.col}>2</Text></Col>\n                <Col span={1}><Text style={styles.col}>3</Text></Col>\n                <Col span={1}><Text style={styles.col}>4</Text></Col>\n                <Col span={1}><Text style={styles.col}>5</Text></Col>\n                <Col span={1}><Text style={styles.col}>6</Text></Col>\n            </Row>\n            <Row>\n                <Col span={2}><Text style={styles.col}>Hello1</Text></Col>\n                <Col span={2} offset={2}><Text style={styles.col}>Hello2</Text></Col>\n                <Col span={4} widthToInt><Text style={styles.col}>Hello1</Text></Col>\n                <Col span={2}><Text style={styles.col}>Hello1</Text></Col>\n                <Col span={4}><Text style={styles.col}>Hello1</Text></Col>\n                <Col span={2}><Text style={styles.col}>Hello1</Text></Col>\n            </Row>\n            <Row>\n                <Col span={3}><Text style={styles.col}>Hello1</Text></Col>\n                <Col span={3}><Text style={styles.col}>Hello2</Text></Col>\n            </Row>\n        </View>\n    );\n}\n```\n\n![demo](./demo.png)\n\n\n### Api `Grid`\n\n| props   |      类型      |       默认值      |  功能 |\n|:----------|:-------------:|:-------------:|------:|\n| gridNum |  number | `6` | 列数 |\n| gutterInside |  number | `12` |  列之间的间距 |\n| gutterOutSide | number  |  `16` | 列距离屏幕边缘的间距 |\n\n\n### Api `Col`\n\n| props   |      类型      |       默认值      |  功能 |\n|:----------|:-------------:|:-------------:|------:|\n| span |  number | `1` | 所占的列数 |\n| offset |  number | `0` |  偏移的列数 |\n| widthToInt | bool  |  `false` | 是否单位采用整数，默认是采用百分比 |\n","readmeFilename":"README.md"}