探索React Native构建:一个全面的教程资源仓库
由于原始代码已经是一个很好的解决方案,我们可以直接引用其中的部分代码来展示如何使用React Native构建一个简单的计算器应用。以下是计算器应用的核心函数部分:
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
export default function App() {
const [numberOne, setNumberOne] = useState('');
const [numberTwo, setNumberTwo] = useState('');
const [operation, setOperation] = useState('+');
const [result, setResult] = useState(null);
const performCalculation = () => {
let calculationResult = 0;
switch (operation) {
case '+':
calculationResult = parseFloat(numberOne) + parseFloat(numberTwo);
break;
case '-':
calculationResult = parseFloat(numberOne) - parseFloat(numberTwo);
break;
// ... 其他操作的处理
default:
calculationResult = 'Invalid operation';
}
setResult(calculationResult);
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value={numberOne}
onChangeText={setNumberOne}
placeholder="Enter first number"
keyboardType="numeric"
/>
<Text style={styles.operation}>{operation}</Text>
<TextInput
style={styles.input}
value={numberTwo}
onChangeText={setNumberTwo}
placeholder="Enter second number"
keyboardType="numeric"
/>
<Button title="=" onPress={performCalculation} />
<Text style={styles.result}>{result || 'Result'}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
width: 150,
height: 50,
borderColor: 'gray',
borderWidth: 1,
textAlign: 'center',
margin: 10,
},
operation: {
fontSize: 20,
margin: 10,
},
result: {
fontSize: 20,
margin: 10,
},
});
这段代码展示了如何使用React Native创建一个简单的计算器界面,并处理按键按下时的计算逻辑。它使用了TextInput
组件来获取用户输入,并用Button
组件来触发计算操作。计算结果会显示在Text
组件中。这个例子是React Native学习的一个很好的起点,因为它简单易懂,同时包含了基本的用户输入和界面展示逻辑。
评论已关闭