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.

--- oktatas:telefon:react_native:komponensek_kueloen_fajlban [2021/10/01 23:04]
admin
+++ oktatas:telefon:react_native:komponensek_kueloen_fajlban [2023/03/20 20:37] (aktuális)
admin
@@ Sor 4: / Sor 4: @@
   * **Szerző:** Sallai András
-  * Copyright (c) Sallai András, 2021
+  * Copyright (c) Sallai András, 2021, 2023
   * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
   * Web: https://szit.hu
+===== Rövidítés =====
+Visual Studio Code rövidítés:
+  rfced
+<code javascript Valami.js>
+import React from 'react'
+export default function Valami(props) {
+    return (
+        <>
+        </>
+    )
+}
+</code>
+A függvény neve automatikusan felveszi a fájl nevét.
 ===== Komponens külön =====
@@ Sor 133: / Sor 156: @@
 ===== Gomb külön =====
+Saját nyomógomb forráskódja:
+<code javascript components/Button.js>
+import React from 'react';
+import { Text, View, TouchableHighlight } from 'react-native';
+import styles from './Button.style';
+export default ({title, onPress}) => {
+  return (
+    <View style={styles.container}>
+        <TouchableHighlight
+            style={styles.runButton}
+            onPress={onPress}
+            >
+            <Text style={styles.runText}>{title}</Text>
+        </TouchableHighlight>
+    </View>
+  );
+}
+</code>
+A hozzátartozó stílus:
+<code javascript components/Button.style.js>
+import { StyleSheet } from 'react-native';
+export default StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  runButton: {
+    backgroundColor: 'blue',
+    margin: 5,
+    padding: 10,
+    borderRadius: 3,
+  },
+  runText: {
+    color: 'white',
+    paddingLeft: 10,
+    paddingRight: 10,
+    fontSize: 32,
+  }
+});
+</code>
+Felhasználás:
+<code javascript App.js>
+//...
+import Button from './components/Button';
+//...
+function handlePress() {
+   //tevékenység
+}
+//...
+<Button title='Felirat' onPress={handlePress} />
+</code>

szit

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon