< React Native

Példák

Szerző: Sallai András

Copyright © Sallai András, 2021, 2023

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Számláló növelő

A példában osztályokat használunk:

import React, { Component} from 'react'; import { View, StyleSheet, Button, Text } from 'react-native'; export default class App extends Component { constructor() { super(); this.state = { counter: 0 } } increment = () => { this.setState({ counter: this.state.counter + 1 }); } render() { return ( <View style={styles.container}> <Text>Számláló: {this.state.counter}</Text> <Button title='Növel' onPress={this.increment} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'skyblue', alignItems: 'center', justifyContent: 'center', }, });

Számláló kicsit másként

import { StyleSheet, Text, View, TextInput, Button } from 'react-native'; import {useState} from 'react'; export default function App() { const [counter, setCounter] = useState(0); function increment() { setCounter(counter + 1) } return ( <View style={styles.container}> <Text style={styles.elso}>Számláló</Text> <TextInput style={styles.input} value={counter} /> <Button title='Számol' onPress={increment} /> <Text style={styles.elso}> {counter} </Text> <Button title="Nulla" onPress={ () => setCounter(0)} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#008', alignItems: 'center', justifyContent: 'center', }, elso: { color: '#fff', fontSize: 30, }, input: { backgroundColor: 'lightblue', width: '90%', fontSize: 30, }, });

Háromszög területe

import React from 'react'; import { Button, StyleSheet, Text, TextInput, View } from 'react-native'; export default function App() { const [base, setBase] = React.useState(''); const [height, setHeight] = React.useState(''); const [area, setArea] = React.useState(''); const handleSubmit = () => { let result = base*height/2; setArea(result); } return ( <View style={styles.container}> <Text style={styles.head}>Háromszög területe</Text> <Text>Alap:</Text> <TextInput style={styles.input} placeholder='Alap' onChangeText={(base) => setBase(base)} /> <Text>Magasság:</Text> <TextInput style={styles.input} placeholder='Magasság' onChangeText={(height) => setHeight(height)} /> <Text style={styles.area}>Terület: {area}</Text> <Button title='Számít' onPress={handleSubmit} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input: { borderWidth: 1, borderColor: '#777', padding: 8, margin: 10, width: 200, }, area: { margin: 20, }, head: { margin: 20, fontSize: 34, } });

Expo:

https://expo.dev/@sallaiandras/haromszogterulet