szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » telefon » react_native » nezetek_kapcsolasa
Nyomvonal:
oktatas:telefon:react_native:nezetek_kapcsolasa

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

Előző változat mindkét oldalonElőző változat
oktatas:telefon:react_native:nezetek_kapcsolasa [2022/01/01 01:01] – [Osztály] adminoktatas:telefon:react_native:nezetek_kapcsolasa [2022/01/01 09:10] (aktuális) – admin
Sor 2: Sor 2:
  
 ====== Nézetek kapcsolása ====== ====== Nézetek kapcsolása ======
- +  * [[oktatas:telefon:react_native:nezetek_kapcsolasa:Osztállyal]] 
-  * **Szerző:** Sallai András +  * [[oktatas:telefon:react_native:nezetek_kapcsolasa:Függvénnyel]] 
-  * Copyright (c) Sallai András, 2021 +  * [[oktatas:telefon:react_native:nezetek_kapcsolasa:Függvénnyel alsó gombokkal]]
-  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] +
-  * Web: https://szit.hu +
- +
-===== Osztállyal ===== +
- +
-==== App.js ==== +
- +
- +
-<code javascript 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, +
-  } +
-}); +
- +
-</code> +
- +
- +
-==== Komponensek ==== +
- +
-<code javascript 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', +
-  }, +
-}); +
-</code> +
- +
- +
-<code javascript 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', +
-  }, +
-}); +
-</code> +
- +
-<code javascript 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', +
-  }, +
-}); +
-</code> +
- +
-===== Függvényekkel ===== +
- +
-<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.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, +
-  }   +
-}); +
-</code> +
- +
-<code javascript 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', +
-  }, +
-}); +
-</code> +
- +
- +
-<code javascript 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', +
-  }, +
-}); +
-</code> +
- +
-<code javascript 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', +
-  }, +
-}); +
-</code>+
oktatas/telefon/react_native/nezetek_kapcsolasa.1640995288.txt.gz · Utolsó módosítás: 2022/01/01 01:01 szerkesztette: admin