@_nu/react-native-grid 中文文档教程

发布于 5年前 浏览 20 项目主页 更新于 3年前

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类型默认值功能
gridNumnumber6列数
gutterInsidenumber12列之间的间距
gutterOutSidenumber16列距离屏幕边缘的间距

Api Col

props类型默认值功能
spannumber1所占的列数
offsetnumber0偏移的列数
widthToIntboolfalse是否单位采用整数,默认是采用百分比
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文