A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Előző változat mindkét oldalon Előző változat Következő változat | Előző változat | ||
oktatas:telefon:react_native:komponensek_kueloen_fajlban [2021/09/17 15:10] admin [Külön fájl] |
oktatas:telefon:react_native:komponensek_kueloen_fajlban [2023/03/20 20:37] admin |
||
---|---|---|---|
Sor 4: | Sor 4: | ||
* **Szerző:** Sallai András | * **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]] | * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] | ||
* Web: https://szit.hu | * Web: https://szit.hu | ||
- | ===== Külön fájl ===== | + | ===== 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 ===== | ||
+ | |||
+ | ==== Külön fájl ==== | ||
Készítsünk a projekt gyökér könyvtárában egy components nevű könyvtárat. | Készítsünk a projekt gyökér könyvtárában egy components nevű könyvtárat. | ||
Itt fogjuk elhelyezni a komponenseinket. | Itt fogjuk elhelyezni a komponenseinket. | ||
- | ===== App.js ===== | + | ==== App.js ==== |
Sor 51: | Sor 76: | ||
- | ===== Komponensek ===== | + | ==== Komponensek ==== |
<code javascript components/head.js> | <code javascript components/head.js> | ||
Sor 129: | Sor 154: | ||
}); | }); | ||
</code> | </code> | ||
+ | |||
+ | ===== 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> | ||
+ | |||
+ | |||