Osztályhasználat

• Szerző: Sallai András
• Copyright © Sallai András, 2021
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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

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',
  },
});

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,
  }
});