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 Utolsó változat Következő változat mindkét oldalon | ||
oktatas:telefon:react_native:komponensek_kueloen_fajlban [2021/10/01 23:04] admin |
oktatas:telefon:react_native:komponensek_kueloen_fajlban [2021/10/01 23:08] admin [Gomb külön] |
||
---|---|---|---|
Sor 133: | Sor 133: | ||
===== Gomb külön ===== | ===== 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> | ||
+ | |||
+ | |||