A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Előző változat mindkét oldalon Előző változat Következő változat | Előző változat | ||
oktatas:telefon:react_native:bekeres [2023/03/20 19:11] admin [Terület Textben] |
oktatas:telefon:react_native:bekeres [2023/03/20 20:21] admin [Terület TextInputban] |
||
---|---|---|---|
Sor 54: | Sor 54: | ||
<Text>Terület</Text> | <Text>Terület</Text> | ||
+ | {/* TERÜLET */} | ||
<TextInput | <TextInput | ||
style={styles.input} | style={styles.input} | ||
Sor 164: | Sor 165: | ||
fontSize: 22, | 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: { | input: { | ||
backgroundColor: 'white', | backgroundColor: 'white', |