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

====== Osztályhasználat ======

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

===== Szöveg =====

A React Native kezdésben már volt példa az osztályhasználatra. Legyen itt újra:

<code javascript App.js>
import React, { Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Helló Világ</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

</code>
===== TextInput =====

<code javascript App.js>
import React, { Component} from 'react';
import { View, StyleSheet, Text, TextInput } from 'react-native';

export default class App extends Component {
  state={
    name: '',
  }
  handleText = text => {
    this.setState({name: text});
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Helló Világ</Text>
        <TextInput 
          style={styles.input}
          value={this.state.text}
          onChangeText={(text) => this.handleText(text)}
        />
        <Text style={{fontSize: 32}}>
          {this.state.name}
          </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderColor: 'green',
    borderWidth: 3,
    width: '90%',
    fontSize: 35,
  }
});

</code>