< Nézetek kapcsolása

Nézetek kapcsolása függvénnyel alsó gombokkal

Szerző: Sallai András

Copyright © Sallai András, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Képernyő

A D feliratú gombra kattintva az eredeti induló képet kapjuk vissza.

Könyvtárszerkezet

app01/
|-assets/
|-components/
| |-compa.js
| |-compb.js
| `-compc.js
|-App.js
|-app.sjon
|-babel.config.js
|-package.json
`-yarn.lock

Belépési pont

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.component}> {selectTab()} </View> <View style={styles.buttonBox}> <Button onPress={() => setTab('A')} title='A' /> <Button onPress={() => setTab('B')} title='B' color='blue' /> <Button onPress={() => setTab('C')} title='C' /> <Button onPress={() => setTab('')} title='D' /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', backgroundColor: 'skyblue', }, buttonBox: { justifyContent: 'center', flexDirection: 'row', width: '100%', height: 30, }, component: { flex: 1, width: '100%', } });

Egyik komponens

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