用React-Native写个iOS风格计算器（1）

今天做一个简单的Demo

就是这样子的

 

废话不多说了，开始吧

 

1.创建项目以及把初始化项目丢到模拟器里面跑起来

首先行命令创建个React-Native项目 这样

react-native init OZCalculator

然后等一会，第一次创建项目有可能会慢一点，等创建完成后再

cd OZCalculator/
react-native run-ios

先把初始化的项目跑起来，这里也要等一下?

然后用WebStorm把我们创建的项目打开

项目结构大概是上面?这样的

好了，现在我们开始第二步

2.创建UI界面

打开index.ios.js文件

输入以下代码 

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    PixelRatio,
    StatusBar
} from 'react-native';

//获取屏幕长宽
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;

export default class OZCalculator extends Component {
    render() {
        return (
            <View style={styles.container}>
                //由于上部分是黑的 把statusBar设为白色的
                <StatusBar barStyle="light-content"/>
                <View style={styles.lineContainer}>
                    //这里0按钮占两格 直接设置flexGrow: 2
                    <View style={[styles.item,{flexGrow: 2}]}>
                        <Text style={[styles.itemNumber, {paddingRight: ScreenWidth/4}]}>0</Text>
                    </View>
                    <View style={[styles.item]}>
                        <Text style={styles.itemNumber}>.</Text>
                    </View>
                    <View style={[styles.item,{backgroundColor: '#fa8c13'}]}>
                        <Text style={styles.itemSymbol}>=</Text>
                    </View>
                </View>
                <View style={styles.lineContainer}>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>1</Text>
                    </View>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>2</Text>
                    </View>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>3</Text>
                    </View>
                    <View style={[styles.item,styles.symbolItemColor]}>
                        <Text style={styles.itemSymbol}>+</Text>
                    </View>
                </View>
                <View style={styles.lineContainer}>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>4</Text>
                    </View>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>5</Text>
                    </View>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>6</Text>
                    </View>
                    <View style={[styles.item,styles.symbolItemColor]}>
                        <Text style={styles.itemSymbol}>-</Text>
                    </View>
                </View>
                <View style={styles.lineContainer}>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>7</Text>
                    </View>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>8</Text>
                    </View>
                    <View style={styles.item}>
                        <Text style={styles.itemNumber}>9</Text>
                    </View>
                    <View style={[styles.item,styles.symbolItemColor]}>
                        <Text style={styles.itemSymbol}>×</Text>
                    </View>
                </View>
                <View style={styles.lineContainer}>
                    <View style={[styles.item,styles.topItemColor]}>
                        <Text style={styles.itemNumber}>AC</Text>
                    </View>
                    <View style={[styles.item,styles.topItemColor]}>
                        <Text style={styles.itemNumber}>±</Text>
                    </View>
                    <View style={[styles.item,styles.topItemColor]}>
                        <Text style={styles.itemNumber}>%</Text>
                    </View>
                    <View style={[styles.item,styles.symbolItemColor]}>
                        <Text style={styles.itemSymbol}>÷</Text>
                    </View>
                </View>
                <View style={styles.result}>
                    <Text style={styles.resultText}>

                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: ScreenHeight,
        flexDirection: 'column-reverse',
    },
    lineContainer: {
        height: ScreenWidth / 4,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    item: {
        backgroundColor: '#d5d6d8',
        borderColor: '#000',
        //这里通过PixelRatiol来获取最小线宽
        borderWidth: 1 / PixelRatio.get(),
        flex: 1,
        marginRight: -1 / PixelRatio.get(),
        marginBottom: -1 / PixelRatio.get(),
        justifyContent: 'center',
        alignItems: 'center'
    },
    topItemColor:{
        backgroundColor: '#c9cacc',
    },
    symbolItemColor:{
        backgroundColor: '#fa8c13',
    },
    itemNumber: {
        fontSize: 30,
    },
    itemSymbol: {
        color:'#FFF',
        fontSize: 30,
    },
    result: {
        backgroundColor: '#000',
        flexDirection: 'column-reverse',
        alignItems: 'flex-end',
        flex: 1,
    },
    resultText: {
        color: '#FFF',
        marginBottom: 10,
        fontSize: 40,
        fontWeight: 'bold',
    }
});

AppRegistry.registerComponent('OZCalculator', () => OZCalculator);

布局这里和其他有些不同是从下往上写的，主轴设置了flexDirection: 'column-reverse'

在模拟器里按下CMD+R就可以刷新页面了，如下图：

先写到这,下一篇实现一下按键相应和计算逻辑

转载于:https://my.oschina.net/u/3324029/blog/852325