一、引言
本篇博客将介绍如何开发一款简易的ReactNative小应用汇率换算器。本应用仅作为学习使用，其支持在人民币与美元间进行汇率计算。汇率计算器应用主要分为两部分：键盘与显示屏。键盘提供给与用户进行输入，在显示屏上进行汇率换算结果的显示。复杂的界面无非是简单组件的组合使用，因此，在进行开发之前，我们可以思考可能需要使用到的独立组件的开发，例如键盘按钮的开发，有键盘按钮组成的键盘的开发，显示屏开发等。首先创建一个初始的ReactNative工程，将index.ios.js与index.android.js文件中的内容全部删掉。在项目根目录中新建4个目录，分别为const、controller、image和view。这4个目录用于存放后面我们需要新建的静态文件，控制器文件，图片素材和视图文件。
二、用户键盘的封装
在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权重的布局模式。
