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(

  style={buttonStyle}

   <Text style={keyButtonStyles.textStyle}>{this.props.number}</Text>

 );

}

}

//配置樣式清單

const keyButtonStyles = StyleSheet.create({

   //正常按鈕樣式

buttonStyleNormal:{

 flex:1,

 backgroundColor:'#323637',

 justifyContent: 'center',

},

   //特殊按鈕樣式

buttonStyleSpecial:{

 backgroundColor:'#f06d30',

   //文本樣式

textStyle:{

 color:'white',

 textAlign:'center',

 fontSize:30

});

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

   在const檔案夾下建立一個Const,js檔案，這個檔案中用來定義全局的一些樣式，實作如下：

import React, { Component } from 'react';

StyleSheet

 } from 'react-native';

export default mainViewStyles = StyleSheet.create({

   //主界面容器的樣式

container:{

 flexDirection:'column',

 backgroundColor:'black'

},

   //顯示屏的樣式

screenView:{

 flex:3,

 backgroundColor:'#f06d30'

   //鍵盤的樣式

keyboardView:{

 flex:7,

 backgroundColor:'#323637'

   在View檔案夾下建立一個KeyboardView.js檔案，将其作為鍵盤視圖類，将其實作如下：

View,

import KeyButton from './KeyButton';

import mainViewStyles from '../const/Const';

export default class KeyboardView extends Component {

  <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>

    <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}/>

    <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}/>

    <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>

const keyboardViewStyles = StyleSheet.create({

keyboardRow:{

 backgroundColor:'black',

 flexDirection:'row'

上面以九宮格的布局模式建立了16個功能按鈕，并且将按鈕的點選事件屬性綁定給鍵盤的buttonPress屬性，由上層視圖來做處理，這裡使用了flex權重的布局模式。