oktatas:telefon:react_native:nezetek_kapcsolasa:fueggvennyel
< Nézetek kapcsolása
Nézetek kapcsolása függvényből
Könyvtárszerkezet
app01/
|-assets/
|-components/
| |-compa.js
| |-compb.js
| `-compc.js
|-App.js
|-app.json
|-babel.config.js
|-package.json
`-yarn.lock
Függvényekkel
- App.js
import { StyleSheet, Text, View, Button } from 'react-native';
import { useState } from 'react';
import Compa from './components/compa';
import Compb from './components/compb';
import Compc from './components/compc';
export default function App() {
const [selectedTab, setSelectedTab] = useState();
let setTab = (tab) => {
setSelectedTab(tab);
}
let selectTab = () => {
switch(selectedTab) {
case 'A':
return <Compa />
case 'B':
return <Compb />
case 'C':
return <Compc />
default:
return
}
}
return (
<View style={styles.container}>
<View style={styles.buttonBox}>
<Button onPress={() => setTab('A')} title='A' />
<Button onPress={() => setTab('B')} title='B'
color='blue'
/>
<Button onPress={() => setTab('C')} title='C' />
<View style={styles.component}>
{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
- compa.js
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default function Compa() {
return (
<View style={styles.container}>
<Text>A komponens</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
- compb.js
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default function Compb() {
return (
<View style={styles.container}>
<Text>B komponens</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
- compc.js
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default function Compc() {
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/fueggvennyel.txt · Utolsó módosítás: 2022/01/01 10:54 szerkesztette: admin