Witam, tworzę kalkulator w react native i napotkałem kilka trudności. Chciałbym aby w kalkulatorze nie było możliwości dodania więcej niż jednej kropki do liczby np. 20.5 + 20.1 - 5.3. Nie bardzo wiem też jak zrobić liczenie %.
Byłbym wdzięczny za sugestie :D
Mój kod:
import React, {useState} from "react";
import {View, Text, StyleSheet } from 'react-native';
import KeyPadItem from '../components/KeyPadItem';
import style from '../styles/CalcStyles';
const CalcScreen = () => {
const [operationText, setOperationText] = useState('');
const [resultText, setResultText] = useState('0');
const calculate = () => {
let checkResult = '';
if (operationText.includes('--'))
{
checkResult = operationText.replace('--','+')
}
else {
checkResult = operationText
}
try {
setResultText(eval(checkResult) || "" + "")
} catch (e) {
setOperationText('Wrong input!')
}
}
const buttonPress = (buttonValue) => {
let operators = ['+','-','','/'];
//let pattern = "([-+/][0-9])^[.]$";
if (buttonValue === "D")
{
backspace()
}
else if (buttonValue === "AC")
{
reset()
}
else if (buttonValue === "=")
{
calculate()
}
else if ((validate() == false) && (operators.includes(buttonValue)))
{
setOperationText(operationText.slice(0,-1) + buttonValue)
}
else if (buttonValue === ".")
{
// TODO: dot
}
else if (buttonValue === "%")
{
// TODO: percentage
}
else
setOperationText(operationText + buttonValue);
}
const validate = () => {
const text = operationText
switch(text.substr(-1)){
case '+':
case '-':
case '*':
case '/':
return false
}
}
const reset = () => {
setOperationText('');
setResultText('0');
}
const backspace = () => {
setOperationText(operationText.slice(0,-1));
}
return (
<View style={style.title}>
<Text style={style.textTitle}>Kalkulator</Text>
<View style={style.operationArea}>
<Text style={style.operationText}>
{operationText}
</Text>
</View>
<View style={style.resultArea}>
<Text style={style.resultText}>
= {resultText}
</Text>
</View>
<View style={style.container}>
<View style={style.row}>
<KeyPadItem buttonValue={'AC'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'D'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'%'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'/'} onButtonPress={buttonPress} />
</View>
<View style={style.row}>
<KeyPadItem buttonValue={'7'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'8'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'9'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'*'} onButtonPress={buttonPress} />
</View>
<View style={style.row}>
<KeyPadItem buttonValue={'4'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'5'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'6'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'-'} onButtonPress={buttonPress} />
</View>
<View style={style.row}>
<KeyPadItem buttonValue={'1'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'2'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'3'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'+'} onButtonPress={buttonPress} />
</View>
<View style={style.row}>
<KeyPadItem buttonValue={'00'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'0'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'.'} onButtonPress={buttonPress} />
<KeyPadItem buttonValue={'='} onButtonPress={buttonPress} />
</View>
</View>
</View>
)
}
export default CalcScreen;