< Nézetek kapcsolása

Nézetek kapcsolása osztályból

Szerző: Sallai András

Copyright © Sallai András, 2021

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Osztállyal

App.js

import React, { Component} from 'react'; import { View, StyleSheet, Button, Text } from 'react-native'; import ComponentA from './components/componenta'; import ComponentB from './components/componentb'; import ComponentC from './components/componentc'; export default class App extends Component { state = { selectedTab: '' } setTab = (tab) => { this.setState({selectedTab: tab}); } selectTab = () => { switch(this.state.selectedTab) { case 'A': return <ComponentA /> case 'B': return <ComponentB /> case 'C': return <ComponentC /> default: return } } render() { return ( <View style={styles.container}> <View style={styles.buttonBox}> <Button onPress={() => this.setTab('A')} title='A' /> <Button onPress={() => this.setTab('B')} title='B' color='blue' /> <Button onPress={() => this.setTab('C')} title='C' /> <View style={styles.component}> {this.selectTab()} </View> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'skyblue', alignItems: 'center', justifyContent: 'center', }, buttonBox: { flex: 1, width: '100%', }, component: { flex: 1, } });

Komponensek

import React, { Component} from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default class ComponentA extends Component { render() { return ( <View style={styles.container}> <Text>A komponens</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
import React, { Component} from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default class ComponentB extends Component { render() { return ( <View style={styles.container}> <Text>B komponens</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
import React, { Component} from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default class ComponentC extends Component { render() { return ( <View style={styles.container}> <Text>C komponens</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });