@_nu/react-native-grid

    0.0.1 • Public • Published

    nu-react-native-grid

    npm package

    这是 NU 「 no-ui 」 组件库系统 nu-system,Grid 组件 React-native 实现。

    怎么用?

    yarn add @_nu/react-native-grid
    

    二次封装

    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};

    使用

    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 (
            <View>
                <Text>Hello world</Text>
                <Wrap>
                    <Text style={styles.col}>Open up App.js to start</Text>
                </Wrap>
                <Row>
                    <Col span={1}><Text style={styles.col}>1</Text></Col>
                    <Col span={1}><Text style={styles.col}>2</Text></Col>
                    <Col span={1}><Text style={styles.col}>3</Text></Col>
                    <Col span={1}><Text style={styles.col}>4</Text></Col>
                    <Col span={1}><Text style={styles.col}>5</Text></Col>
                    <Col span={1}><Text style={styles.col}>6</Text></Col>
                </Row>
                <Row>
                    <Col span={2}><Text style={styles.col}>Hello1</Text></Col>
                    <Col span={2} offset={2}><Text style={styles.col}>Hello2</Text></Col>
                    <Col span={4} widthToInt><Text style={styles.col}>Hello1</Text></Col>
                    <Col span={2}><Text style={styles.col}>Hello1</Text></Col>
                    <Col span={4}><Text style={styles.col}>Hello1</Text></Col>
                    <Col span={2}><Text style={styles.col}>Hello1</Text></Col>
                </Row>
                <Row>
                    <Col span={3}><Text style={styles.col}>Hello1</Text></Col>
                    <Col span={3}><Text style={styles.col}>Hello2</Text></Col>
                </Row>
            </View>
        );
    }

    demo

    Api Grid

    props 类型 默认值 功能
    gridNum number 6 列数
    gutterInside number 12 列之间的间距
    gutterOutSide number 16 列距离屏幕边缘的间距

    Api Col

    props 类型 默认值 功能
    span number 1 所占的列数
    offset number 0 偏移的列数
    widthToInt bool false 是否单位采用整数,默认是采用百分比

    Install

    npm i @_nu/react-native-grid

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    18.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • nanasun
    • ziven27