react native學習筆記

1.首先就讓我從第一步開始做（react native技術更新的太快2017版本的和2018版本的有一定的差距，以後可以回顧）

2.先上效果圖，技術回顧的時候可以方便些

開發環境準備好，因為是簡單的react native計算器，所以代碼在App.js一個頁面完成

1.首先做好計算器的布局

如圖

樣式如下

const styles = StyleSheet.create({
    //底部右邊view
    buttonContainerRight:{
        flex:3,
        flexDirection:‘column‘
    },
    line1:{
        flex:3,
        alignItems: ‘flex-end‘,
        justifyContent: ‘center‘,
        backgroundColor:‘#EBEBEB‘,
        borderWidth: 2,
        borderColor:‘black‘
    },
    line2:{
        flex:2,
        backgroundColor:‘green‘,
        flexDirection:‘row‘
    },
    line3:{
        flex:2,
        backgroundColor:‘blue‘,
        flexDirection:‘row‘
    },
    line4:{
        flex:2,
        backgroundColor:‘red‘,
        flexDirection:‘row‘
    },
    line5:{
        flex:2,
        backgroundColor:‘pink‘,
        flexDirection:‘row‘
    },
    mygrid:{
        flex:1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor:‘#FFFFFE‘,
        borderWidth: 0.5,
        borderColor: ‘#c0c0c0‘
    },
    mygrid2:{
        flex:1,
        justifyContent:‘center‘,
        alignItems:‘center‘,
        backgroundColor:‘#F2F2F2‘,
        borderWidth:0.5,
        borderColor:‘#c0c0c0‘
    }

});

　　然後在做每一個按鈕及其事件

app.js全部代碼如下

import React, {Component} from ‘react‘;
import {StyleSheet,View,TouchableNativeFeedback, Text} from ‘react-native‘;


export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            a:‘0‘,
            b:‘0‘,
            oper:null,
            displayValue:‘0‘
        };
        this.clickNum = this.clickNum.bind(this);
        this.setOper = this.setOper.bind(this);
        this.calc = this.calc.bind(this);
    }

    render() {
        return (
            <View style={styles.rootContainer}>
                <View style={styles.topContainer}>
                    <Text>a:{this.state.a}</Text>
                    <Text>b:{this.state.b}</Text>
                    <Text>操作符：{this.state.oper}</Text>
                    <Text>狀態：{this.state.displayValue}</Text>
                </View>
                <View style={styles.buttonContainer}>
                    <View style={styles.buttonContainerLeft}><Text> </Text></View>
                    <View style={styles.buttonContainerRight}>
                        <View style={styles.line1}>
                            <Text style={{fontSize:40}}>{this.state.displayValue}</Text>
                        </View>
                        <View style={styles.line2}>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘7‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>7</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘8‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>8</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘9‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>9</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.setOper.bind(this,4)}><View style={styles.mygrid2}><Text style={{fontSize:33}}>÷</Text></View></TouchableNativeFeedback>
                        </View>
                        <View style={styles.line3}>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘4‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>4</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘5‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>5</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘6‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>6</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.setOper.bind(this,3)}><View style={styles.mygrid2}><Text style={{fontSize:33}}>×</Text></View></TouchableNativeFeedback>
                        </View>
                        <View style={styles.line4}>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘1‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>1</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘2‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>2</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘3‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>3</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.setOper.bind(this,2)}><View style={styles.mygrid2}><Text style={{fontSize:33}}>-</Text></View></TouchableNativeFeedback>
                        </View>
                        <View style={styles.line5}>
                            <TouchableNativeFeedback onPress={this.calc}><View style={styles.mygrid2}><Text style={{fontSize:33}}>=</Text></View></TouchableNativeFeedback>
                            <TouchableNativeFeedback onPress={this.clickNum.bind(this,‘0‘)}><View style={styles.mygrid}><Text style={{fontSize:33}}>0</Text></View></TouchableNativeFeedback>
                            <View style={styles.mygrid2}><Text style={{fontSize:33}}>.</Text></View>
                            <TouchableNativeFeedback onPress={this.setOper.bind(this,1)}><View style={styles.mygrid2}><Text style={{fontSize:33}}>+</Text></View></TouchableNativeFeedback>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
    //按數字
    clickNum(paramValue){
        /*let beforeValue=this.state.displayValue;
        let lastValue=‘0‘;
        if(beforeValue===‘0‘){
            lastValue=paramValue
        }else{
            lastValue=beforeValue+paramValue
        }
        this.setState({
            displayValue:lastValue
        })*/
        this.setState((beforeState,props)=>{
            //先判斷操作符是否為空
            if(beforeState.oper==null){
                //如果操作符為空，代表客戶輸入的數字，為a
                let lastValue=‘0‘;
                if(beforeState.a===‘0‘){
                    lastValue=paramValue
                }else{
                    lastValue=beforeState.a+paramValue
                }
                return{a:lastValue,displayValue: lastValue}
            }else{
                //操作符不為null，代表客戶輸入的數字，屬於b
                let lastValue=‘0‘;
                if(beforeState.b===‘0‘){
                    lastValue=paramValue;
                }else {
                    lastValue=beforeState.b+paramValue
                }
                return{b:lastValue,displayValue:lastValue}
            }
        })
    }
    //按操作符
    setOper(param){
        this.setState({
            oper:param
        })
    }
    //按等號
    calc(){
        let d=0;
        if(this.state.oper===1){
            d=(this.state.a*1.0)+this.state.b*1.0
        }
        if(this.state.oper==2){
            d=(this.state.a*1.0)-this.state.b*1.0
        }
        if(this.state.oper==3){
            d=(this.state.a*1.0)*this.state.b*1.0
        }
        if(this.state.oper==4){
            d=(this.state.a*1.0)/this.state.b*1.0
        }
        this.setState({
            a:‘0‘,
            b:‘0‘,
            oper:null,
            displayValue:d
        })
    }
}

const styles = StyleSheet.create({
    rootContainer : {
        flex:1,
        flexDirection: ‘column‘,
        backgroundColor:‘#FFFFF1‘
    },
    //頂部view
    topContainer:{
        flex:2
    },
    //底部view
    buttonContainer:{
        flex:3,
        flexDirection: ‘row‘
    },
    //底部左邊view
    buttonContainerLeft:{
        flex:1,
        flexDirection:‘row‘,
        backgroundColor: ‘#FFFFF1‘
    },
    //底部右邊view
    buttonContainerRight:{
        flex:3,
        flexDirection:‘column‘
    },
    line1:{
        flex:3,
        alignItems: ‘flex-end‘,
        justifyContent: ‘center‘,
        backgroundColor:‘#EBEBEB‘,
        borderWidth: 2,
        borderColor:‘black‘
    },
    line2:{
        flex:2,
        backgroundColor:‘green‘,
        flexDirection:‘row‘
    },
    line3:{
        flex:2,
        backgroundColor:‘blue‘,
        flexDirection:‘row‘
    },
    line4:{
        flex:2,
        backgroundColor:‘red‘,
        flexDirection:‘row‘
    },
    line5:{
        flex:2,
        backgroundColor:‘pink‘,
        flexDirection:‘row‘
    },
    mygrid:{
        flex:1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor:‘#FFFFFE‘,
        borderWidth: 0.5,
        borderColor: ‘#c0c0c0‘
    },
    mygrid2:{
        flex:1,
        justifyContent:‘center‘,
        alignItems:‘center‘,
        backgroundColor:‘#F2F2F2‘,
        borderWidth:0.5,
        borderColor:‘#c0c0c0‘
    }

});

　　效果圖

react native制作簡單的計算器