至此，键盘部分先告一段落，我们需要对显示屏进行开发，在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地址如下：
