React Native教程第二部分: 计算器的布局和样式

µÚÒ»²¿·Ö: Hello, React | µÚ¶þ²¿·Ö: Éè¼ÆCalculator | µÚÈý²¿·Ö: ¿ª·¢Calculator

±¾½Ì³ÌµÄÍêÕû´úÂëÔÚGitHub¡£

½éÉÜ

ÔÚµÚÒ»²¿·ÖÎÒÃÇÍê³ÉÁË¡°Hello, React!¡± appµÄÅäÖã¬ÔÚµÚ¶þ²¿·Ö£¬ÎÒÃǽÓ×ÅÉÏÎÄ¿ªÊ¼¼ÆËãÆ÷µÄ²¼¾ÖºÍÑùʽÉ趨¡£

¼ÆËãÆ÷µÄ²¼¾Ö

ÎÒÃÇÊ×ÏÈÍê³É¼ÆËãÆ÷µÄ²¼¾Ö¡£¼ÆËãÆ÷Ö÷ÒªÓÐÁ½²¿·Ö£º

1. ÏÔʾÓû§ÊäÈëºÍ¼ÆËã½á¹ûµÄ²¿·Ö¡£

2. Óû§ÊäÈëÊý×ÖºÍÔËËã·ûºÅµÄ²¿·Ö¡£

ÈÃÎÒÃÇ´ò¿ªReactCalculator.jsÎļþ£¬Ê¹ÓÃflexbox´´½¨Á½¸ö½Úµã¡£°Ñ text label´Órenderº¯ÊýÖÐÒƳý£¬²¢ÓÃÏÂÃæµÄÄÚÈÝÌæ»»Ëü£º

render() {
    return (
        <View style={{flex: 1}}>
            <View style={{flex: 2, backgroundColor: '#193441'}}></View>
            <View style={{flex: 8, backgroundColor: '#3E606F'}}></View>
        </View>
    )
}

ÎÒÃÇËù×öµÄ¾ÍÊÇ´´½¨Ò»¸ö°üº¬ÁËÕâÁ½¸ö½ÚµãµÄViewÈÝÆ÷£¬Í¨¹ýÑùʽflex: 1ÈÃËüµÄ¿í¶ÈºÍ¸ß¶ÈÕ¼Âú¿ÉÓõĿռ䡣ÿ¸ö¿Ø¼þÖ»ÄÜÓÐÒ»¸ö¸ùview£¬Òò´ËÕâ¸öÈÝÆ÷ÊDZØÒªµÄ¡£

ÔÚÈÝÆ÷ÀïÃ棬ÎÒÃÇ´´½¨ÁËÁ½¸öÑùʽ·Ö±ðΪflex: 2ºÍflex: 8µÄview£¬ÈÃËüÃÇ·Ö±ðÕ¼¾Ý¸ùÈÝÆ÷µÄ20£¥ºÍ80£¥¡£ÎªÁËÄܸüºÃÇø·ÖÕâÁ½¸ö¿Ø¼þ£¬ÎÒÃÇΪÿ¸öviewÉèÖÃÁËÒ»¸ö²»Í¬µÄ±³¾°ÑÕÉ«¡£

ͬÑùÄãÐèÒª´Óreact-nativeµ¼ÈëViewÀ࣬°ÑËüÌí¼Óµ½ÏÖÓеÄimportÖУ¬ÈçÏ£º

...
import {
    View,
    Text,
    AppRegistry
} from 'react-native';

ÏÖÔÚÔËÐÐapp£¬Ð§¹ûÓ¦¸ÃÊÇÕâÑùµÄ£º

ºÃÁËÏÖÔÚÎÒÃÇ¿ªÊ¼°ÑËüŪµÄ¸üÏñÒ»¸ö¼ÆËãÆ÷µÄÑù×Ó¡£²»¹ýÔÚÕâ֮ǰÎÒÃÇÐèÒªÇåÀíÒ»ÏÂÕâЩÑùʽ¡£ÄÚÁªµÄÑùʽ¿ÉÒÔÈÃÄã¿ìËٵĿ´µ½Ð§¹û£¬µ«ÊÇÒ»µ©Ê§¿Ø¾Í»áÔ½À´Ô½ÂÒ¡£ÐÒÔ˵ÄÊÇÎÒÃÇûÓб»ÏÞÖÆÖ»ÄÜÕâÑùʹÓÃÄÚÁªÑùʽ£¬¶øÊÇ¿ÉÒÔ´´½¨Ò»¸öÑùʽÎļþ£¬È»ºó±»ÒýÓýøÀ´¡£ÕâÖÖ·½Ê½»¹¿ÉÒÔʹÎÒÃÇÔÚ¼¸¸ö¿Ø¼þÖ®¼ä¹²ÏíÒ»¸öÑùʽ£¬½ÓÏÂÀ´¾Í»áÔÚÎÒÃǵİ´Å¥ÉÏʹÓá£

ÔÚsrc/Ŀ¼´´½¨Ò»¸ö Style.jsµÄÔ´Îļþ£¬µ¼ÈëStyleSheet Àࣺ

import { StyleSheet } from 'react-native';
var Style = StyleSheet.create({
    rootContainer: {
        flex: 1
    },
    displayContainer: {
        flex: 2,
        backgroundColor: '#193441'
    },
    inputContainer: {
        flex: 8,
        backgroundColor: '#3E606F'
    }
});
export default Style;

Äã»á×¢Òâµ½×îÏÂÃæÎÒÃǵ¼³ö£¨export£©ÁËStyle£¬ÕâÊÇΪÁËÈÃÆäËüÎļþ¿ÉÒÔͨ¹ý import Style.jsÀ´Ê¹ÓÃËü£¬ÂíÉÏÎÒÃǾͻáÕâÑù×ö¡£

»Øµ½ReactCalculator.js £¬¸üÐÂrenderº¯ÊýÈÃËüÒýÓö¨ÒåÔÚ Style.jsÖеÄÑùʽ£º

import Style from './Style';
...
<View style={Style.rootContainer}>
    <View style={Style.displayContainer}></View>
    <View style={Style.inputContainer}></View>
</View>

Ìí¼ÓÊäÈë°´Å¥

ºÃÁËÏÖÔÚÎÒÃǵIJ¼¾Ö½á¹¹ÉèÖÃÍê±Ï£¬ÑùʽҲÊÇÍâÁªµÄÁË£¬ÄÇô¿ÉÒÔ¿ªÊ¼Ìí¼Ó°´Å¥ÁË¡£ÎÒÃÇÏÈÔÚ src/ Ŀ¼´´½¨Ò»¸öInputButtonÀ࣬ÓÃÓÚÏÔʾ¼ÆËãÆ÷ÖеÄÒ»¸ö°´Å¥£º

// InputButton.js
import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';
import Style from './Style';
export default class InputButton extends Component {
    
    render() {
        return (
            <View style={Style.inputButton}>
                <Text style={Style.inputButtonText}>{this.props.value}</Text>
            </View>
        )
    }
    
}

ÕâÀïҪעÒâÁ½µã£º

1. We export the class directly using export default on the class definition.ÎÒÃÇÔÚÀàµÄ¶¨ÒåÖÐʹÓÃexport defaultÀ´µ¼³öÀà

2. Text viewʹÓÃthis.props.value¡£Props±¾ÖÊÉÏÊÇ¿ÉÒÔ´«µÝ¸ø×ӿؼþµÄ¾²Ì¬Êý¾Ý£¬ºóÃæÎÒÃǽ«Óõ½¡£

ÈÃÎÒÃÇÔÚStyle.jsÖÐΪInputButtonÌí¼ÓһЩÑùʽ£º

// Style.js
var Style = StyleSheet.create({
    ...
    
    inputButton: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 0.5,
        borderColor: '#91AA9D'
    },
    inputButtonText: {
        fontSize: 22,
        fontWeight: 'bold',
        color: 'white'
    }
});

°Ñ¿ÉÖØÓõİ´Å¥¶¨ÒåºÃÁËÖ®ºó£¬¾Í¿ÉÒԻص½ReactCalculatorÌí¼ÓÎÒÃǵİ´Å¥ÁË¡£

ÎÒÃDz»Ò»¸öÒ»¸öµÄ¶¨Òå°´Å¥£¬¶øÊÇÓøü³ÌÐò»¯µÄ·½Ê½¡£

ÎÒÃǶ¨ÒåÒ»¸ö¶þάÊý×éÀ´´ú±í¼ÆËãÆ÷µÄÿһÐС£È»ºó´´½¨Ò»¸ö¶¯Ì¬Éú³É°´Å¥µÄº¯Êý²¢ÔÚrenderÖе÷Óá£Õâ¸öеĺ¯Êý£¬_renderInputButtons£¬½«±éÀúinputButtonsÊý×éµÄÿÐÐÒÔ¼°Ã¿ÐÐÖеÄÊý×Ö£¨»òÕß·ûºÅ£©£¬´´½¨Ò»¸öInputButton²¢°ÑËüÌí¼Óµ½inputRowÖС£

´úÂëÈçÏ£º

// ReactCalculator.js
...
import InputButton from './InputButton';
// Define the input buttons that will be displayed in the calculator.
const inputButtons = \[
    \[1, 2, 3, '/'\],
    \[4, 5, 6, '*'\],
    \[7, 8, 9, '-'\],
    \[0, '.', '=', '+'\]
\];
class ReactCalculator extends Component {
    render() {
        return (
            <View style={Style.rootContainer}>
                <View style={Style.displayContainer}></View>
                <View style={Style.inputContainer}>
                    {this._renderInputButtons()}
                </View>
            </View>
        )
    }
    /**
     * For each row in \`inputButtons\`, create a row View and add create an InputButton for each input in the row.
     */
    _renderInputButtons() {
        let views = \[\];
        for (var r = 0; r < inputButtons.length; r ++) {
            let row = inputButtons\[r\];
            let inputRow = \[\];
            for (var i = 0; i < row.length; i ++) {
                let input = row\[i\];
                inputRow.push(
                    <InputButton value={input} key={r + "-" + i} />
                );
            }
            views.push(<View style={Style.inputRow} key={"row-" + r}>{inputRow}</View>)
        }
        return views;
    }
}

×¢£ºÔÚ´´½¨Ò»¸ö¿Ø¼þÊý×éµÄʱºò_renderInputButtonsÖпؼþÉϵÄkeyÊDZØÒªµÄ£¬¶øÇÒÊý×éÉϵÄÿ¸ö¿Ø¼þkey±ØÐëΨһ¡£

ÒÔÉÏÑÝʾÁËÈçºÎ¶¯Ì¬µÄ´´½¨View£¬ÒÔ¼°ÈçºÎÔÚrenderº¯ÊýÖе÷ÓÃËüÃÇ¡£ÕâʹµÃÎÒÃÇ¿ÉÒÔ´´½¨·Ç³£¸´ÔӵĽçÃæ¡£

Èç¹ûϸ¿´´úÂëÄã»á·¢ÏÖÎÒÃÇÐèÒªÔÚStyle.jsÖж¨ÒåÒ»¸öinputRowµÄÑùʽ£º

// Style.js
...
    inputRow: {
        flex: 1,
        flexDirection: 'row'
    }
...

ºÃÁË£¬ÔËÐдúÂ룬ÏÖÔÚ¼ÆËãÆ÷µÄ½çÃæÈçÏ£º

×ܽá

Ä¿Ç°ÎÒÃÇÒѾ­Íê³ÉÁ˼ÆËãÆ÷µÄ²¼¾ÖºÍÑùʽ£¬µ«ÊÇ»¹ÐèÒª¿ª·¢Êµ¼ÊµÄ¼ÆË㹦ÄÜ¡£ÔÚ±¾½Ì³ÌµÄµÚÈý²¿·Ö£¬ÎÒÃǽ«¼ÌÐøÌí¼Ó´¥Ãþʼþ´¦Àí£¬ÎªUI¸üÐÂʵÏÖState£¬²¢¸ù¾ÝÓû§ÊäÈëÖ´ÐÐÊýѧ¼ÆËã¡£

µÚÈý²¿·Öµã»÷ÕâÀï¡£