至此，鍵盤部分先告一段落，我們需要對顯示屏進行開發，在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(){
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.USMoney>'0'){
let newUS = (parseInt(__this.state.USMoney)-1).toString();
if(__this.state.CHMoney>'0'){
let newCH = (parseInt(__this.state.CHMoney)-1).toString();
//加号觸發的方法
this.add = function(){
let newUS = (parseFloat(__this.state.USMoney)+1).toString();
__this.setState({USMoney:newUS});
let newCH = (parseFloat(__this.state.CHMoney)+1).toString();
__this.setState({CHMoney:newCH});
//進行匯率轉換
this.trans = function(){
let us = parseFloat(__this.state.USMoney);
__this.setState({CHMoney:(us*6.7).toFixed(2).toString()});
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>
fontSize:37,
}}>{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>
marginLeft:70,
height:1,
backgroundColor:'white',
marginTop:10,
flex:1
}}></View>
</View>
fontSize:17,
marginTop:-3,
zIndex:99
}}>{transToText}</Text>
marginRight:20
}}>{bottomText}</Text>
</View>
);
}
封裝好了鍵盤與顯示屏，我們需要将其關聯結合起來，在View檔案夾下再建立一個MainView.js檔案，實作如下：
StyleSheet
import KeyboardView from './KeyboardView';
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 { AppRegistry, Text } from 'react-native';
import MainView from '../View/MainView';
export class MainViewController{
view(){
<MainView />
修改index.ios.js與index.android.js檔案如下：
import {
AppRegistry,
Text
} from 'react-native';
MainViewController
} from './Controller/MainViewController';
class News extends Component {
let controller = new MainViewController();
return controller.view();
AppRegistry.registerComponent('News', () => News);
運作項目，效果如下圖：
iOS：
android：
本項目的完整代碼github位址如下：
https://github.com/ZYHshao/ReactNative-ExchangeRate。