探索React Native构建:一个全面的教程资源仓库
    		       		warning:
    		            这篇文章距离上次修改已过450天,其中的内容可能已经有所变动。
    		        
        		                
                由于原始代码已经是一个很好的解决方案,我们可以直接引用其中的部分代码来展示如何使用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学习的一个很好的起点,因为它简单易懂,同时包含了基本的用户输入和界面展示逻辑。
评论已关闭