react-native 写一个布局合理的计算器，这么难吗？

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;