最終效果

計(jì)算器

代碼

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

    export default class FlexBoxDemoActivity extends Component {
            render() {
            return (
                        <View style={FlexBoxStyle.rootview}>
            
                            {/*顯示*/}
                            <Text style={FlexBoxStyle.display}>顯示區(qū)域</Text>
            
                            <View style={FlexBoxStyle.numKey}>
                                {/*按鍵*/}
                                <Text style={FlexBoxStyle.numItem}>9</Text>
                                <Text style={FlexBoxStyle.numItem}>8</Text>
                                <Text style={FlexBoxStyle.numItem}>7</Text>
                                <Text style={FlexBoxStyle.numItem}>6</Text>
                                <Text style={FlexBoxStyle.numItem}>5</Text>
                                <Text style={FlexBoxStyle.numItem}>4</Text>
                                <Text style={FlexBoxStyle.numItem}>3</Text>
                                <Text style={FlexBoxStyle.numItem}>2</Text>
                                <Text style={FlexBoxStyle.numItem}>1</Text>
                                <Text style={FlexBoxStyle.numItem}>=</Text>
                                <Text style={FlexBoxStyle.numItem}>.</Text>
                                <Text style={FlexBoxStyle.numItem}>0</Text>
                            </View>
            
                            {/*右側(cè)邏輯運(yùn)算符區(qū)域*/}
                            <View style={FlexBoxStyle.option}>
                                <Text style={FlexBoxStyle.numItem}>+</Text>
                                <Text style={FlexBoxStyle.numItem}>CE</Text>
                                <Text style={FlexBoxStyle.numItem}>-</Text>
                                <Text style={FlexBoxStyle.numItem}>C</Text>
                                <Text style={FlexBoxStyle.numItem}>*</Text>
                                <Text style={FlexBoxStyle.numItem}>sin</Text>
                                <Text style={FlexBoxStyle.numItem}>%</Text>
                                <Text style={FlexBoxStyle.numItem}>cos</Text>
            
                            </View>
            
                        </View>
            
                    )
         }
    }

const FlexBoxStyle = StyleSheet.create({

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

    display: {
        //相當(dāng)于TtextView的gravity=center效果
        textAlign: "right",
        textAlignVertical: "center",

        //相當(dāng)于android里面的weight
        // flexGrow: 1,

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

    //數(shù)字按鍵
    numKey:{
        flex:3,
        width:"70%",
        flexWrap:"wrap",
        padding:10,
        backgroundColor:"green",
        flexDirection:"row-reverse",
        justifyContent: 'space-around'
    },

    //右側(cè)邏輯運(yùn)算符
    option:{
        paddingTop:10,
        paddingLeft:10,
        flex:2,
        flexWrap:"wrap",
        backgroundColor:"blue",
        width:"30%",
        flexDirection:"row",
        justifyContent: 'space-around'
    },

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

        //相當(dāng)于TtextView的gravity=center效果
        textAlign: "center",
        textAlignVertical: "center",

        //和androidMarginRight一樣
        marginRight: 20,

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

    }
})