< React Native

Osztályhasználat

Szerző: Sallai András

Copyright © Sallai András, 2021

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Valami

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

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

TextInput

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