import React, { useState } from 'react';
import { View, Text, StyleSheet, Button, TouchableHighlight } from 'react-native';
const CalculatorApp = () => {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
const handleInput = (value: any) => {
setInput(input + value);
};
const calculateResult = () => {
try {
setResult(eval(input).toString());
} catch (error) {
setResult('Error');
}
};
const clearInput = () => {
setInput('');
setResult('');
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
buttonRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 20,
width: '100%'
},
input: {
flex:1,
fontSize: 24,
marginBottom: 10
},
result: {
flex:1,
fontSize: 30,
marginBottom: 20
},
buttonWrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
fontSize: 18, // 或您需要的其他大小
color: 'black', // 文本颜色
},
// 修改后的 button22 样式
button22: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
minHeight: 40, // 或您需要的高度
},
buttonContainer: {
flex:3,
flexDirection: 'column',
flexWrap: 'wrap',
justifyContent: 'space-between'
},
// 可以根据需要添加更多样式
});
// 接下来添加样式和 UI
return (
<View style={styles.container}>
<Text style={styles.input}>{input}</Text>
<Text style={styles.result}>{result}</Text>
<View style={styles.buttonContainer}>
<View style={styles.buttonRow}>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('1')}>
<Text style={styles.buttonText}>1</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('2')}>
<Text style={styles.buttonText}>2</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('3')}>
<Text style={styles.buttonText}>3</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('4')}>
<Text style={styles.buttonText}>4</Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.buttonRow}>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('5')}>
<Text style={styles.buttonText}>5</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('7')}>
<Text style={styles.buttonText}>6</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('7')}>
<Text style={styles.buttonText}>7</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('8')}>
<Text style={styles.buttonText}>8</Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.buttonRow}>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('9')}>
<Text style={styles.buttonText}>9</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('0')}>
<Text style={styles.buttonText}>0</Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.buttonRow}>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('+')}>
<Text style={styles.buttonText}>+</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('-')}>
<Text style={styles.buttonText}>-</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('*')}>
<Text style={styles.buttonText}>*</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => handleInput('/')}>
<Text style={styles.buttonText}>/</Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.buttonRow}>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => clearInput()}>
<Text style={styles.buttonText}>cleare</Text>
</TouchableHighlight>
</View>
<View style={styles.buttonWrapper}>
<TouchableHighlight style={styles.button22} onPress={() => calculateResult()}>
<Text style={styles.buttonText}>=</Text>
</TouchableHighlight>
</View>
</View>
</View>
</View>
);
};
export default CalculatorApp;