ReactNative学习——FlexBox布局练习（计算器面板Demo）

最终效果

计算器

代码

    import React, {Component} from "react";
    import {AppRegistry, StyleSheet, Text, View, Alert, Button,} from "react-native";

    export default class FlexBoxDemoActivity extends Component {
            render() {
            return (
                        
            
                            {/*显示*/}
                            显示区域
            
                            
                                {/*按键*/}
                                9
                                8
                                7
                                6
                                5
                                4
                                3
                                2
                                1
                                =
                                .
                                0
                            
            
                            {/*右侧逻辑运算符区域*/}
                            
                                +
                                CE
                                -
                                C
                                *
                                sin
                                %
                                cos
            
                            
            
                        
            
                    )
         }
    }

const FlexBoxStyle = StyleSheet.create({

    rootview: {
        flexDirection: "row",
        flexWrap: "wrap"
    },

    display: {
        //相当于TtextView的gravity=center效果
        textAlign: "right",
        textAlignVertical: "center",

        //相当于android里面的weight
        // flexGrow: 1,

        padding: 10,
        marginRight: 10,
        backgroundColor: "grey",
        width: "100%",
        // boxSizing: content-box|border-box|inherit;
        height: 50
    },

    //数字按键
    numKey:{
        flex:3,
        width:"70%",
        flexWrap:"wrap",
        padding:10,
        backgroundColor:"green",
        flexDirection:"row-reverse",
        justifyContent: 'space-around'
    },

    //右侧逻辑运算符
    option:{
        paddingTop:10,
        paddingLeft:10,
        flex:2,
        flexWrap:"wrap",
        backgroundColor:"blue",
        width:"30%",
        flexDirection:"row",
        justifyContent: 'space-around'
    },

    numItem:{
        backgroundColor: "#f0f",
        marginTop: 10,

        //相当于TtextView的gravity=center效果
        textAlign: "center",
        textAlignVertical: "center",

        //和androidMarginRight一样
        marginRight: 20,

        alignContent: "center",
        width: 40,
        height: 40,

    }
})