szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:telefon:react_native:nezetek_kapcsolasa|< Nézetek kapcsolása]]

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

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Képernyő =====

{{:oktatas:telefon:react_native:nezetek_kapcsolasa:reactnative_01.png|}}

A D feliratú gombra kattintva az eredeti induló képet kapjuk vissza.
===== Könyvtárszerkezet =====

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

===== Belépési pont =====

<code javascript 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.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%',
  }  
});

</code>

===== Egyik komponens =====


<code javascript components/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',
  },
});
</code>