今天做一个简单的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就可以刷新页面了,如下图:
先写到这,下一篇实现一下按键相应和计算逻辑