[[oktatas:telefon:react_native|< React Native]]

====== Példák ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Számláló növelő =====

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


<code javascript App.js>
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',
  },
});

</code>

{{:oktatas:telefon:react_native:szamlalo_novelo.png?200|}}


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

Teljes forráskód: 
  * https://github.com/oktat/mobil_count.git

<code javascript App.js>
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,
  },
});
</code>

===== Háromszög területe =====


<code javascript App.js>
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,
  }
});

</code>


{{:oktatas:telefon:react_native:haromszogterulete.png?200|}}

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