你見過這樣的計算器嗎？兩百行代碼就可以實現！

簡介：大三學生黨一枚！主攻Android開發，對於Web和後端均有了解。
語錄：取乎其上，得乎其中，取乎其中，得乎其下，以頂級態度寫好一篇的博客。

做IT行業的相信大部分朋友都開發過計算器的小demo。大部分都是基於C,Java,Python開發的，今天學習ReactNative，順手寫了個計算器，自認爲UI開發的還行。先來一張圖看看效果！

整個風格和IOS的計算器差不多，但是他只有200多行代碼就可以實現。
關於ReactNative這裏就不多介紹，他是facebook推出的一種跨平臺開發的技術。

設計風格

關於界面是使用類似於CSS控制的，使用的方法就和前端類似，但是有點不同。

const styles = StyleSheet.create({
     container:{
     //整個計算器界面的外邊距和距離頂部的距離
        marginTop:80,
        flex:1,
        marginLeft:18,
        marginRight:18,
     },
     buttonContainer:{
     //每一行按鈕的佈局，高度爲100，主軸是水平的，沿着主軸分佈排列
        height:100,
        flexDirection:'row',
        marginLeft:8,
        marginRight:8,
        justifyContent:'space-around',
        alignItems:'flex-start',

     },
     topButton:{
     //上面一行的按鈕顏色不一樣，主要是設置顏色的差別
        width:80,
        height:80,
        marginTop:10,
        borderRadius:160,
        alignItems:'center',
        backgroundColor:'rgb(165, 165, 165)',
        justifyContent:'center'

     },
     rightButton:{
     //右邊的按鈕顏色也不同
     //設置原型按鈕，通過redius指定爲長寬的兩倍即可。
        width:80,
        height:80,
        marginTop:10,
        borderRadius:160,
        alignItems:'center',
        backgroundColor:'rgb(240, 153, 55)',
        justifyContent:'center'
     },
     centerButton:{
        width:80,
        height:80,
        marginTop:10,
        borderRadius:160,
        alignItems:'center',
        backgroundColor:'rgb(51, 51, 51)',
        justifyContent:'center'
     },
     zeroButton:{
     //按鈕0佔據兩個按鈕的位置，所以長度要改變
        width:160,
        height:80,
        marginTop:10,
        borderRadius:160,
        alignItems:'center',
        backgroundColor:'rgb(51, 51, 51)',
        justifyContent:'center'
     },
     textStyle:{
     //設置按鈕的字體風格和大小
        textAlign:'center',
        color:'white',
        fontSize:25,

     },
     resultText:{
     //設置顯示結果的字體風格和大小
        textAlign:'center',
        fontSize:35,
        color:'black',
        height:50,
        backgroundColor:'rgb(238,238,238)',
     }
});

這種寫法是借鑑CSS的，只不過使用駝峯命名法把CSS中的屬性都改了名稱。接下來只需要把我們計算器的每個區域按照我們設計的風格進行顯示就可以了。

邏輯控制

ReactNative中的邏輯控制是使用JSX語法來實現的，JSX是基於JavaScript的一種語法糖。

主要邏輯就是監聽按鈕的點擊時間，並實時的更新顯示欄的顯示內容。主要是通過setState來實時更新的！加減乘除的邏輯都很簡單哦！render()方法用來渲染界面。！也就是我們所看到的界面

render() {

    return (
       <View style={styles.container}>
          //最頂層的view是一個container，所有的控件都放在這裏面。
            <Text style={styles.resultText}>{this.state.show}</Text>
            //頂部顯示結果的Text
            <View style={styles.buttonContainer}>
            //TouchableOpacity都是顯示按鈕的！他是組合的控件！
                 <TouchableOpacity style={styles.topButton} onPress={()=>this._onPressButton('AC')}>
                       <Text style={styles.textStyle}>AC</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.topButton} onPress={()=>this._onPressButton('+/-')}>
                       <Text style={styles.textStyle}>+/-</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.topButton} onPress={()=>this._onPressButton('%')}>
                       <Text style={styles.textStyle}>%</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('÷')}>
                       <Text style={styles.textStyle}>÷</Text>
                 </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('7')}>
                       <Text style={styles.textStyle}>7</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('8')}>
                       <Text style={styles.textStyle}>8</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('9')}>
                       <Text style={styles.textStyle}>9</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('x')}>
                       <Text style={styles.textStyle}>×</Text>
                 </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('4')}>
                       <Text style={styles.textStyle}>4</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('5')}>
                       <Text style={styles.textStyle}>5</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('6')}>
                       <Text style={styles.textStyle}>6</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('—')}>
                       <Text style={styles.textStyle}>—</Text>
                 </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('1')}>
                       <Text style={styles.textStyle}>1</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('2')}>
                       <Text style={styles.textStyle}>2</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('3')}>
                       <Text style={styles.textStyle}>3</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('+')}>
                       <Text style={styles.textStyle}>+</Text>
                 </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.zeroButton} onPress={()=>this._onPressButton('0')}>
                       <Text style={styles.textStyle}>0</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('.')}>
                       <Text style={styles.textStyle}>.</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('=')}>
                       <Text style={styles.textStyle}>=</Text>
                 </TouchableOpacity>
            </View>
        </View>
    );
  }
}

完整的代碼如下：

import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';


export default class Touchables extends Component {
   // 定義一個構造函數，裏面能有保存參數的函數
   constructor(props){
   //this.state:保存了所有參數的狀態，第一個數和操作符，第二個數，以及顯示的內容
     super(props);
     this.state = {
       a:null,
       b:null,
       op:null,
       show:0,
   }
}
   _onPressButton(num) {
     switch (num) {
       //AC直接請0
       case 'AC':
       this.setState({
            a:null,
            b:null,
            op:null,
            show:0,
          });
         break;

      case '+':
           if(this.state.a!=null){
             this.state.op='+';
             this.setState({
                 op:'+',
                 show:this.state.a==null?0:this.state.a+this.state.op,
               });
           }
           break;


      case '—':
           if(this.state.a!=null){
            this.state.op='—';
            this.setState({
                op:'-',
                show:this.state.a==null?0:this.state.a+this.state.op,
              });
           }
          break;

      case 'x':
             if(this.state.a!=null){
              this.state.op='x';
              this.setState({
                  op:'x',
                  show:this.state.a==null?0:this.state.a+this.state.op,
                });
             }
            break;

      case '÷':
            if(this.state.a!=null){
             this.state.op='÷';
             this.setState({
                 op:'÷',
                 show:this.state.a==null?0:this.state.a+this.state.op,
               });
            }
           break;
      case '=':
           if(this.state.b==null||this.state.a==null||this.state.op==null){
             this.setState({
                  a:null,
                  b:null,
                  op:null,
                  show:0,
                })
           }else{
             switch (this.state.op) {
               case '+':
               let result1 = parseInt(this.state.a) + parseInt(this.state.b);
               this.setState({
                    a:null,
                    b:null,
                    op:null,
                    show:result1
                  });
                 break;
              case '-':
              let result2 = parseInt(this.state.a) - parseInt(this.state.b);
              this.setState({
                   a:null,
                   b:null,
                   op:null,
                   show:result2,
                 });
                break;
              case 'x':
              let result3 = parseInt(this.state.a)*parseInt(this.state.b);
              this.setState({
                   a:null,
                   b:null,
                   op:null,
                   show:result3,
                 });
                break;
              case '/':
              let result4 = parseInt(this.state.a) / parseInt(this.state.b);
              this.setState({
                   a:null,
                   b:null,
                   op:null,
                   show:result4,
                 });
                break;
               default:

             }
           }

        break;
       default:
         if(this.state.a==null){
           this.setState({
                a:num,
                show:num+"",
             })
         }else{
           this.setState({
                b:num,
                show:this.state.a+""+this.state.op+""+num,
             })
         }


     }

  }

  _onLongPressButton() {
    Alert.alert('You long-pressed the button!')
  }

  render() {

    return (
       <View style={styles.container}>
            <Text style={styles.resultText}>{this.state.show}</Text>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.topButton} onPress={()=>this._onPressButton('AC')}>
                       <Text style={styles.textStyle}>AC</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.topButton} onPress={()=>this._onPressButton('+/-')}>
                       <Text style={styles.textStyle}>+/-</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.topButton} onPress={()=>this._onPressButton('%')}>
                       <Text style={styles.textStyle}>%</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('÷')}>
                       <Text style={styles.textStyle}>÷</Text>
                 </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('7')}>
                       <Text style={styles.textStyle}>7</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('8')}>
                       <Text style={styles.textStyle}>8</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('9')}>
                       <Text style={styles.textStyle}>9</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('x')}>
                       <Text style={styles.textStyle}>×</Text>
                 </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('4')}>
                       <Text style={styles.textStyle}>4</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('5')}>
                       <Text style={styles.textStyle}>5</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('6')}>
                       <Text style={styles.textStyle}>6</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('—')}>
                       <Text style={styles.textStyle}>—</Text>
                 </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('1')}>
                       <Text style={styles.textStyle}>1</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('2')}>
                       <Text style={styles.textStyle}>2</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('3')}>
                       <Text style={styles.textStyle}>3</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('+')}>
                       <Text style={styles.textStyle}>+</Text>
                 </TouchableOpacity>
            </View>
            <View style={styles.buttonContainer}>
                 <TouchableOpacity style={styles.zeroButton} onPress={()=>this._onPressButton('0')}>
                       <Text style={styles.textStyle}>0</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.centerButton} onPress={()=>this._onPressButton('.')}>
                       <Text style={styles.textStyle}>.</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.rightButton} onPress={()=>this._onPressButton('=')}>
                       <Text style={styles.textStyle}>=</Text>
                 </TouchableOpacity>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
     container:{
        marginTop:80,
        flex:1,
        marginLeft:18,
        marginRight:18,
     },
     buttonContainer:{
        height:100,
        flexDirection:'row',
        marginLeft:8,
        marginRight:8,
        justifyContent:'space-around',
        alignItems:'flex-start',

     },
     topButton:{
        width:80,
        height:80,
        marginTop:10,
        borderRadius:160,
        alignItems:'center',
        backgroundColor:'rgb(165, 165, 165)',
        justifyContent:'center'

     },
     rightButton:{
        width:80,
        height:80,
        marginTop:10,
        borderRadius:160,
        alignItems:'center',
        backgroundColor:'rgb(240, 153, 55)',
        justifyContent:'center'
     },
     centerButton:{
        width:80,
        height:80,
        marginTop:10,
        borderRadius:160,
        alignItems:'center',
        backgroundColor:'rgb(51, 51, 51)',
        justifyContent:'center'
     },
     zeroButton:{
        width:160,
        height:80,
        marginTop:10,
        borderRadius:160,
        alignItems:'center',
        backgroundColor:'rgb(51, 51, 51)',
        justifyContent:'center'
     },
     textStyle:{
        textAlign:'center',
        color:'white',
        fontSize:25,

     },
     resultText:{
        textAlign:'center',
        fontSize:35,
        color:'black',
        height:50,
        backgroundColor:'rgb(238,238,238)',
     }
});

由於本文涉及到的技術比較小衆，需要一些前端的知識，並且不完全基於前端的JS,所以這裏沒有詳細的介紹技術的實現。有問題的，可以諮詢我。

最後，一個IT交流與資源分享的羣要推薦給您，讓小白更好，更快的走上IT之路！謝謝您的閱讀。

別再猶豫，一起來學習！