ReactNative應用之匯率換算器開發全解析

ReactNative應用之匯率換算器開發全解析

1、引言

    本篇博客將介紹如何開發一款簡易的ReactNative小應用匯率換算器。本應用僅做爲學習使用，其支持在人民幣與美圓間進行匯率計算。匯率計算器應用主要分爲兩部分：鍵盤與顯示屏。鍵盤提供給與用戶進行輸入，在顯示屏上進行匯率換算結果的顯示。複雜的界面無非是簡單組件的組合使用，所以，在進行開發以前，咱們能夠思考可能須要使用到的獨立組件的開發，例如鍵盤按鈕的開發，有鍵盤按鈕組成的鍵盤的開發，顯示屏開發等。首先建立一個初始的ReactNative工程，將index.ios.js與index.android.js文件中的內容所有刪掉。在項目根目錄中新建4個目錄，分別爲const、controller、image和view。這4個目錄用於存放後面咱們須要新建的靜態文件，控制器文件，圖片素材和視圖文件。

2、用戶鍵盤的封裝

    在view文件夾下新建一個KeyButton.js文件，其用來建立鍵盤上的獨立按鈕，將其實現以下：

import React, { Component,PropTypes } from 'react';
import { 
	TouchableHighlight,
	Text,
	StyleSheet,
	Image
} from 'react-native';

export default class KeyButton extends Component{
	render(){
        //根據number屬性來作判斷
		if (this.props.number == '刪') {
			return(
			<TouchableHighlight 
			underlayColor='#f06d30' 
			style={[keyButtonStyles.buttonStyleNormal,{alignItems:'center'}]}
			onPress={this.props.buttonPress.bind(this,this.props.number)}>
				<Image source={require('../image/delete.png')}/>
			</TouchableHighlight>
			);
		};
		//特殊按鈕須要狀態來判斷
		var buttonStyle;
		if(this.props.number == 'C' || this.props.number == '='){
            buttonStyle = keyButtonStyles.buttonStyleSpecial;
		}else{
			buttonStyle =  keyButtonStyles.buttonStyleNormal;
		}
		return(
			<TouchableHighlight 
			underlayColor='#f06d30' 
			style={buttonStyle}
			onPress={this.props.buttonPress.bind(this,this.props.number)}>
				<Text style={keyButtonStyles.textStyle}>{this.props.number}</Text>
			</TouchableHighlight>
		);
	}
}
//配置樣式列表
const keyButtonStyles = StyleSheet.create({
    //正常按鈕樣式
	buttonStyleNormal:{
		flex:1,
		backgroundColor:'#323637',
		justifyContent: 'center',
	},
    //特殊按鈕樣式
	buttonStyleSpecial:{
		flex:1,
		backgroundColor:'#f06d30',
		justifyContent: 'center',
	},
    //文本樣式
	textStyle:{
		color:'white',
		textAlign:'center',
		fontSize:30
	}
});

上面代碼中預留number屬性做爲按鈕的標題，不一樣的按鈕可能帶有不一樣的樣式，一樣經過這個屬性來作區分。按鈕的觸發事件綁定給了buttonPress屬性，而且在按鈕觸發執行時，將按鈕的number屬性傳遞出去。

    在const文件夾下建立一個Const,js文件，這個文件中用來定義全局的一些樣式，實現以下：

import React, { Component } from 'react';
import { 
	StyleSheet
	 } from 'react-native';


export default mainViewStyles = StyleSheet.create({
    //主界面容器的樣式
	container:{
		flex:1,
		flexDirection:'column',
		backgroundColor:'black'
	}, 
    //顯示屏的樣式
	screenView:{
		flex:3,
		backgroundColor:'#f06d30'
	},
    //鍵盤的樣式
	keyboardView:{
		flex:7,
		backgroundColor:'#323637'
	}
});

    在View文件夾下新建一個KeyboardView.js文件，將其做爲鍵盤視圖類，將其實現以下：

import React, { Component } from 'react';
import { 
	View, 
	Text,
	StyleSheet
	 } from 'react-native';
import KeyButton from './KeyButton';
import mainViewStyles from '../const/Const';
export default class KeyboardView extends Component {
	render(){
		return(
			<View style={mainViewStyles.keyboardView}>
				<View style={keyboardViewStyles.keyboardRow}>
					<KeyButton number='1' buttonPress={this.props.buttonPress}/>
					<KeyButton number='2' buttonPress={this.props.buttonPress}/>
					<KeyButton number='3' buttonPress={this.props.buttonPress}/>
					<KeyButton number='刪' buttonPress={this.props.buttonPress}/>
				</View>
				<View style={keyboardViewStyles.keyboardRow}>
					<KeyButton number='4' buttonPress={this.props.buttonPress}/>
					<KeyButton number='5' buttonPress={this.props.buttonPress}/>
					<KeyButton number='6' buttonPress={this.props.buttonPress}/>
					<KeyButton number='0' buttonPress={this.props.buttonPress}/>
				</View>
				<View style={keyboardViewStyles.keyboardRow}>
					<KeyButton number='7' buttonPress={this.props.buttonPress}/>
					<KeyButton number='8' buttonPress={this.props.buttonPress}/>
					<KeyButton number='9' buttonPress={this.props.buttonPress}/>
					<KeyButton number='.' buttonPress={this.props.buttonPress}/>
				</View>
				<View style={keyboardViewStyles.keyboardRow}>
					<KeyButton number='C' buttonPress={this.props.buttonPress}/>
					<KeyButton number='-' buttonPress={this.props.buttonPress}/>
					<KeyButton number='+' buttonPress={this.props.buttonPress}/>
					<KeyButton number='=' buttonPress={this.props.buttonPress}/>
				</View>
			</View>
		);
	}
}
const keyboardViewStyles = StyleSheet.create({
	keyboardRow:{
		flex:1,
		backgroundColor:'black',
		flexDirection:'row'
	}
});

上面以九宮格的佈局模式建立了16個功能按鈕，而且將按鈕的點擊事件屬性綁定給鍵盤的buttonPress屬性，由上層視圖來作處理，這裏使用了flex權重的佈局模式。

    至此，鍵盤部分先告一段落，咱們須要對顯示屏進行開發，在View文件夾下新建一個ScreenView.js文件，將其做爲顯示屏視圖類，顯示屏類和鍵盤比起來要複雜許多，由於其要實現各類屏幕操做功能，例如回退，刪除，清空，計算等，實現以下：

import React, { Component } from 'react';
import { 
	View, 
	Text,
	StyleSheet,
	TouchableHighlight,
	Image
	 } from 'react-native';
import mainViewStyles from '../const/Const';
export default class ScreenView extends Component {
	constructor(props) {
	  super(props);
      //這三個狀態分別用來標記是美圓轉人民幣或者人民幣轉美圓，美圓數，人民幣數
	  this.state = {
	  	transUS:true,
	  	USMoney:'0',
		CHMoney:'0'
	  };
	  let __this = this;
      //進行美圓轉人民幣或者人民幣轉美圓轉換時調用
	  this.change = function(){
		__this.setState({transUS:!__this.state.transUS});
	  };
	  //數字類按鈕被點擊觸發的方法
	  this.buttonClick = function(count){
	  	var us=__this.state.USMoney,ch=__this.state.CHMoney;
	  	if (__this.state.transUS) {
	  			if (us=='0') {us=count;}else{us=__this.state.USMoney+count;};
	  		}else{
	  			if (ch=='0') {ch=count;}else{ch=__this.state.CHMoney+count;};
	  		};
	  	__this.setState({
	  		USMoney:us,
	  		CHMoney:ch
	  	});
	  };
	  //清除按鈕被點擊觸發的方法
	  this.clear = function(){
	  	__this.setState({
	  		USMoney:'0',
	  		CHMoney:'0'
	  	});
	  };
	  //回退按鈕被點擊觸發的方法
	  this.delete = function(){
		if (__this.state.transUS) {
			if (__this.state.USMoney.length>1) {
				let newUS = __this.state.USMoney.substring(0,__this.state.USMoney.length-1);
				__this.setState({USMoney:newUS});
			}else if(__this.state.USMoney>'0'){
				__this.setState({USMoney:'0'});
			}
		}else{
			if (__this.state.CHMoney.length>1) {
				let newCH = __this.state.CHMoney.substring(0,__this.state.CHMoney.length-1);
				__this.setState({CHMoney:newCH});
			}else if(__this.state.CHMoney>'0'){
				__this.setState({CHMoney:'0'});
			}
		}
	  };
	  //減號觸發的方法
	  this.sub = function(){
	  	if (__this.state.transUS) {
		   if(__this.state.USMoney>'0'){
		   		let newUS = (parseInt(__this.state.USMoney)-1).toString();
				__this.setState({USMoney:newUS});
			}
		}else{
			if(__this.state.CHMoney>'0'){
				let newCH = (parseInt(__this.state.CHMoney)-1).toString();
				__this.setState({CHMoney:newCH});
			}
		}
	  };
	  //加號觸發的方法
	  this.add = function(){
	  	if (__this.state.transUS) {
		   let newUS = (parseFloat(__this.state.USMoney)+1).toString();
			__this.setState({USMoney:newUS});
		}else{
			let newCH = (parseFloat(__this.state.CHMoney)+1).toString();
			__this.setState({CHMoney:newCH});
		}
	  };
	  //進行匯率轉換
	  this.trans = function(){
	  	if (__this.state.transUS) {
		   let us = parseFloat(__this.state.USMoney);
		   __this.setState({CHMoney:(us*6.7).toFixed(2).toString()});
		}else{
			let ch = parseFloat(__this.state.CHMoney);
		   __this.setState({USMoney:(ch/6.7).toFixed(2).toString()});
		}
	  }
	}

	render(){
		let transText = this.state.transUS?"從美圓":"從人民幣";
		let transToText = this.state.transUS?"到人民幣":"到美圓";
		let topText = this.state.transUS?this.state.USMoney+'$':this.state.CHMoney+'￥';
		let bottomText = this.state.transUS?this.state.CHMoney+'￥':this.state.USMoney+'$';
		return(
			<View style={mainViewStyles.screenView}>
				<Text style={{
					color:'white',
					textAlign:'right',
					marginRight:20,
					marginTop:20,
					fontSize:17
				}}>{transText}</Text>
				<Text style={{
					color:'white',
					textAlign:'right',
					fontSize:37,
					marginRight:20,
				}}>{topText}</Text>
				<View style={{
					flexDirection:'row',
					zIndex:100,
					marginTop:-7.5
				}}>
				<TouchableHighlight 
				 underlayColor='#f06d30'
				 style={{
					left:50,
					marginTop:0,
				}} onPress={this.change}>
					<Image source={require('../image/exchange.png')}/>
				</TouchableHighlight>
				<View style={{
					marginLeft:70,
					height:1,
					backgroundColor:'white',
					marginTop:10,
					flex:1
				}}></View>
				</View>
				<Text style={{
					marginTop:10,
					color:'white',
					textAlign:'right',
					fontSize:17,
					marginRight:20,
					marginTop:-3,
					zIndex:99
				}}>{transToText}</Text>
				<Text style={{
					color:'white',
					textAlign:'right',
					fontSize:37,
					marginRight:20
				}}>{bottomText}</Text>
			</View>
		);
	}
}

    封裝好了鍵盤與顯示屏，咱們須要將其聯動結合起來，在View文件夾下再建立一個MainView.js文件，實現以下：

import React, { Component } from 'react';
import { 
	View, 
	Text,
	StyleSheet
	 } from 'react-native';
import KeyboardView from './KeyboardView';
import mainViewStyles from '../const/Const';
import ScreenView from './ScreenView';
// 匯率換算器主界面視圖

export default class MainView extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    let __this = this;
    return (
      <View style={mainViewStyles.container}>
        <ScreenView ref="screenView"/>
        <KeyboardView buttonPress={function(title){
          __this.buttonPress(title);
        }}/>
      </View>
    )
  }
  buttonPress(title){
    //根據按鍵類型進行相關功能調用
    if (title=='刪') {
      this.refs.screenView.delete();
    }else if(title=='C'){
      this.refs.screenView.clear();
    }else if(title=='-'){
      this.refs.screenView.sub();
    }else if(title=='+'){
      this.refs.screenView.add();
    }else if(title=='='){
      this.refs.screenView.trans();
    }else{
      this.refs.screenView.buttonClick(title);
    }
    
  }

}

到此，ReactNative應用匯率轉換器的核心功能已經所有完成了，此應用只有一個界面，其實咱們已經能夠直接將MainView組建註冊爲項目的根組建，可是若是是多界面的應用，咱們最好再使用Controller將其進行封裝，在Controller文件夾下建立一個MainViewController.js文件，爲其提供一個view()方法，以下：

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
import MainView from '../View/MainView';
export class MainViewController{
    view(){
		return(
			<MainView />
		);
	}
}

修改index.ios.js與index.android.js文件以下：

import React, { Component } from 'react';
import {
  AppRegistry,
  Text
} from 'react-native';
import {
  MainViewController
} from './Controller/MainViewController';

class News extends Component {
  render() {
    let controller = new MainViewController();
    return controller.view();
  }
}

AppRegistry.registerComponent('News', () => News);

運行項目，效果以下圖：

iOS：

 

android：

本項目的完整代碼github地址以下：

https://github.com/ZYHshao/ReactNative-ExchangeRate。

ReactNative興趣羣：605794212，歡迎交流學習。