// App.js
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, TextInput } from 'react-native';

const App = () => {
    const [input, setInput] = useState('');
    const [result, setResult] = useState('');

    const handleButtonPress = (value) => {
        setInput(input + value);
    };

    const calculateResult = () => {
        try {
            setResult(eval（input).toString());
        } catch (e) {
            setResult('Error');
        }
    };

    const clearInput = () => {
        setInput('');
        setResult('');
    };

    return (
        <View style={styles.container}>
            <TextInput
                style={styles.display}
                value={input}
                placeholder="0"
                editable={false}
            />
            <TextInput
                style={styles.result}
                value={result}
                placeholder="Result"
                editable={false}
            />
            <View style={styles.buttonContainer}>
                <Button title="1" onPress={() => handleButtonPress('1')} />
                <Button title="2" onPress={() => handleButtonPress('2')} />
                <Button title="3" onPress={() => handleButtonPress('3')} />
                <Button title="+" onPress={() => handleButtonPress('+')} />
            </View>
            <View style={styles.buttonContainer}>
                <Button title="4" onPress={() => handleButtonPress('4')} />
                <Button title="5" onPress={() => handleButtonPress('5')} />
                <Button title="6" onPress={() => handleButtonPress('6')} />
                <Button title="-" onPress={() => handleButtonPress('-')} />
            </View>
            <View style={styles.buttonContainer}>
                <Button title="7" onPress={() => handleButtonPress('7')} />
                <Button title="8" onPress={() => handleButtonPress('8')} />
                <Button title="9" onPress={() => handleButtonPress('9')} />
                <Button title="*" onPress={() => handleButtonPress('*')} />
            </View>
            <View style={styles.buttonContainer}>
                <Button title="0" onPress={() => handleButtonPress('0')} />
                <Button title="C" onPress={clearInput} />
                <Button title="=" onPress={calculateResult} />
                <Button title="/" onPress={() => handleButtonPress('/')} />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    display: {
        fontSize: 24,
        width: '80%',
        padding: 10,
        backgroundColor: '#e0e0e0',
        marginBottom: 10,
        textAlign: 'right',
    },
    result: {
        fontSize: 24,
        width: '80%',
        padding: 10,
        backgroundColor: '#e0e0e0',
        marginBottom: 10,
        textAlign: 'right',
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        width: '80%',
        marginBottom: 10,
    },
});

export default App;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.