oktatas:telefon:react_native:nezetek_kapcsolasa:osztallyal
< Nézetek kapcsolása
Nézetek kapcsolása osztályból
Osztállyal
App.js
- 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
- components/componenta.js
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',
},
});
- components/componentb.js
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',
},
});
- components/componentc.js
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',
},
});
oktatas/telefon/react_native/nezetek_kapcsolasa/osztallyal.txt · Utolsó módosítás: 2022/01/01 09:21 szerkesztette: admin