react native制作簡單的計算器
阿新 • • 發佈:2018-12-04
操作 end 開發 rop ive click rect nbsp erl
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制作簡單的計算器