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:gomb [2024/02/13 11:05] – [React Native gombok] admin
+++ oktatas:telefon:react_native:gomb [2024/12/12 22:17] (aktuális) – [A gomb külön fájlban] admin
@@ Sor 103: / Sor 103: @@
 ===== A gomb külön fájlban =====
+<code javascript CoolButton.js>
+import {
+  StyleSheet,
+  Text,
+  TouchableHighlight
+} from "react-native";
+const CoolButton = (props) => {
+  return (
+    <TouchableHighlight
+      style={props.style || styles.button}
+      onPress={props.onPress}>
+      <Text
+      style={styles.text}>{props.title}</Text>
+    </TouchableHighlight>
+  );
+}
+export default CoolButton
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'lightblue',
+    padding: 10,
+    borderRadius: 5,
+    borderColor: 'blue',
+    borderWidth: 1,
+  },
+  text: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  }
+})
+</code>
+===== A gomb külön fájlban gyakorlat =====
 <code javascript Button.js>
@@ Sor 201: / Sor 239: @@
 Dokumentáció: https://reactnative.dev/docs/pressable (2024)
+==== Pressable külön fájlban ====
+<code javascript components/Button.js>
+import { Pressable, StyleSheet, Text } from "react-native";
+export default function Button(props) {
+    return (
+        <Pressable
+        onPress={props.onPress}
+        style={styles.button}
+        >
+            <Text
+            style={styles.text}
+            >{props.title}</Text>
+        </Pressable>
+    );
+}
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: 'dodgerblue',
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        borderRadius: 3,
+        margin: 10,
+        alignItems: 'center',
+    },
+    text: {
+        color: 'white',
+        fontSize: 14,
+        textTransform: 'uppercase',
+    },
+});
+</code>