文档章节

ReactNative应用之汇率换算器开发全解析

珲少
 珲少
发布于 2016/12/26 10:15
字数 1755
阅读 278
收藏 14

ReactNative应用之汇率换算器开发全解析

一、引言

    本篇博客将介绍如何开发一款简易的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权重的布局模式。

    至此,键盘部分先告一段落,我们需要对显示屏进行开发,在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,欢迎交流学习。

 

© 著作权归作者所有

珲少

珲少

粉丝 886
博文 394
码字总数 475753
作品 0
上海
程序员
私信 提问
ReactNative从零开始笔记4-PropTypes使用

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、PropTypes的简介 1.自定义组件的时候暴露属性到外界时候,外界调用组件具有属性...

摸着石头过河_崖边树
01/17
0
0
ReactNative从零开始笔记3-state(状态)与props(属性)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、 props(属性) ReactNative(React)使用两种数据来控制一个组件:props 和 stat...

摸着石头过河_崖边树
01/18
0
0
ReactNative从零开始笔记2-组件的生命周期

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、ReactNative提供了哪些组件 基础组件 View 基础组件 Text 文本组件 Image 图片...

摸着石头过河_崖边树
01/18
0
0
React Native跨平台移动应用开发框架介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/61423043 好久没有来更新博客了,给大家说声抱歉,人一旦懒惰起来连自己都害怕。可能...

Aduroidpc
2017/03/11
0
0
ReactNative学习笔记(一)

一.ReactNative 环境搭建 1.参考指南 reactnative.cn/docs/0.48/getting-started.html#content ReactNative 中文网,集成步骤详细,按步骤一步步来,这里就不赘述了。 2.遇到的问题 如果你按...

朱敏_ITer
2017/09/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
50分钟前
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
52分钟前
5
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
6
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部