Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:telefon:react_native:bekeres [2023/03/20 19:10]
admin [Terület TextInputban]
+++ oktatas:telefon:react_native:bekeres [2023/03/20 20:21]
admin [Terület TextInputban]
@@ Sor 54: / Sor 54: @@
       <Text>Terület</Text>
+      {/* TERÜLET */}
       <TextInput
       style={styles.input}
@@ Sor 95: / Sor 96: @@
 <code javascript App.js>
+import { StatusBar } from 'expo-status-bar';
+import { useState } from 'react';
+import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
+import { TextInput } from 'react-native';
+function calcTriangleArea(base, height) {
+  return base * height / 2;
+}
+export default function App() {
+  const [base, setBase] = useState('');
+  const [height, setHeight] = useState('');
+  const [area, setArea] = useState('');
+  function startCalc() {
+    let result = calcTriangleArea(base, height);
+    setArea(result);
+  }
+  return (
+    <View style={styles.container}>
+      <Text>Triangle</Text>
+      <Text>Háromszög területszámítás</Text>
+      <Text>Alap</Text>
+      <TextInput
+      style={styles.input}
+      onChangeText={base => setBase(base)}
+      />
+      <Text>Magasság</Text>
+      <TextInput
+      style={styles.input}
+      onChangeText={height => setHeight(height)}
+      />
+      <TouchableHighlight
+        style={styles.button}
+        onPress={startCalc}
+      >
+        <Text style={styles.buttonText}>Számít</Text>
+      </TouchableHighlight>
+      <Text>Terület</Text>
+      <Text>{area}</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'aqua',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    backgroundColor: 'blue',
+    marginTop: 10,
+    padding: 10,
+    borderRadius: 3,
+  },
+  butotnText: {
+    color: 'white',
+    paddingLeft: 10,
+    paddingRight: 10,
+    fontSize: 22,
+  },
+  input: {
+    backgroundColor: 'white',
+    height: 30,
+  }
+});
+</code>
+===== A gomb külön fájlban =====
+<code javascript Buttonjs>
+import React from 'react';
+import { StyleSheet, Text, TouchableHighlight } from 'react-native';
+const Button = (props) => {
+    return (
+        <TouchableHighlight
+        style={styles.button}
+        onPress={props.onPress}
+        >
+            <Text style={styles.buttonText}>Számít</Text>
+        </TouchableHighlight>
+    );
+}
+export default Button;
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: 'blue',
+        marginTop: 10,
+        padding: 10,
+        borderRadius: 3,
+    },
+    buttonText: {
+        color: 'white',
+        paddingLeft: 10,
+        paddingRight: 10,
+        fontSize: 22,
+    },
+});
+</code>
+<code javascript App.js>
+import { StatusBar } from 'expo-status-bar';
+import { useState } from 'react';
+import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
+import { TextInput } from 'react-native';
+import Button from './components/Button';
+function calcTriangleArea(base, height) {
+  return base * height / 2;
+}
+export default function App() {
+  const [base, setBase] = useState('');
+  const [height, setHeight] = useState('');
+  const [area, setArea] = useState('');
+  function startCalc() {
+    let result = calcTriangleArea(base, height);
+    setArea(result);
+  }
+  return (
+    <View style={styles.container}>
+      <Text>Triangle</Text>
+      <Text>Háromszög területszámítás</Text>
+      <Text>Alap</Text>
+      <TextInput
+      style={styles.input}
+      onChangeText={base => setBase(base)}
+      />
+      <Text>Magasság</Text>
+      <TextInput
+      style={styles.input}
+      onChangeText={height => setHeight(height)}
+      />
+      <Button onPress={startCalc} />
+      <Text>Terület</Text>
+      <Text>{area}</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'aqua',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    backgroundColor: 'white',
+    height: 30,
+  }
+});
 </code>

szit

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon