Nézetek kapcsolása

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

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

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

compa.js

import React, { Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';
 
export default class Compa 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',
  },
});

compa.js

import React, { Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';
 
export default class Compb 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',
  },
});

compa.js

import React, { Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';
 
export default class Compc 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',
  },
});