oktatas:telefon:react_native:bekeres
< React Native
React Native - Bevitel
Triangle
Terület TextInputban
- 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>
{/* TERÜLET */}
<TextInput
style={styles.input}
onChangeText={area => setArea(area)}
value={area}
/>
<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,
}
});
Terület Textben
- 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,
}
});
A gomb külön fájlban
- 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,
},
});
- 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,
}
});
oktatas/telefon/react_native/bekeres.txt · Utolsó módosítás: 2023/03/20 20:21 szerkesztette: admin