nativescript上的Gridlayout不会对组件进行扩展

Question

我正在尝试在nativescript上进行网格布局，但是我得到了这个结果：

这是我的XML

    import React from 'react';
import ReactCenter from 'react-center';
import {Row, Col} from 'react-flexbox-grid';
import Input from '@material-ui/core/Input';
import Button from '@material-ui/core/Button';


class Login extends React.Component{
    render(){
        return(
            <div id="loginForm" style={{height: "100vh", width: "100vw"}}>
                <ReactCenter style={{height: "100vh", width: "100vw"}}>
                        <div style={{height: "200px", width: "300px"}}>
                            <Row>
                                <Col xs="3" sm="3" lg="3"/>

                                <Col xs="6" sm="6" lg="6">
                                    <Input placeholder="username" />
                                </Col>

                                <Col xs="3" sm="3" lg="3"/>
                            </Row>

                            <br/>

                            {/*Row for password*/}
                            <Row>
                                <Col xs="3" sm="3" lg="3"/>

                                <Col xs="6" sm="6" lg="6">
                                    <Input placeholder="password" type="password" />
                                </Col>

                                <Col xs="3" sm="3" lg="3"/>
                            </Row>

                            <br/>

                            <Row>
                                <Col xs="3" sm="3" lg="3"/>

                                <Col xs="6" sm="6" lg="6">
                                    <Button variant="outlined" color="primary">Login</Button>
                                </Col>

                                <Col xs="3" sm="3" lg="3"/>
                            </Row>
                        </div>
                </ReactCenter>
            </div>
        );
    }
}

export default Login;

感谢!!!!!!

Answer 1

我在文档中找到了答案，谢谢！

<GridLayout rows="*,*" columns="2*,2*,*" width="100%" backgroundColor="#888">
                <Label text="option" class="h2 m-y-auto" width="100%" textWrap="true" row="0" col="0" rowSpan="2" backgroundColor="#f00" />
                <Label text="value" class="h2 text-primary m-y-auto" width="100%" row="0" col="1" rowSpan="2" backgroundColor="#0f0" />
                <Button text="U" tap="{{openData}}" class="btn btn-primary btn-active p-0 m-0" width="100%" row="0" col="2" backgroundColor="#00f" />
                <Button text="D" tap="{{openData}}" class="btn btn-primary btn-active p-0 m-0" width="100%" row="1" col="2" backgroundColor="#ff0" />
            </GridLayout>