szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:telefon:react_native|< React Native]]

====== React Native gombok ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2023, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Nyomógomb =====


<code javascript>
import { StyleSheet, SafeAreaView, Button } from 'react-native';
</code>


<code javascript>
    <SafeAreaView style={styles.container}>
      <Button 
        title="Kattints ide"
        onPress={() => alert('vmi')}
      />
      <StatusBar style="auto" />
    </SafeAreaView>
</code>


Alert osztály:

<code javascript>
import { StyleSheet, SafeAreaView, Button, Alert } from 'react-native';
</code>


<code javascript>
      <Button 
        title="Kattints ide"
        onPress={() => Alert.alert('Cím', 'Valami', [
          {text: 'Yes'},
          {text: 'No'},
        ])}
      />
</code>


<code javascript>
      <Button 
        title="Kattints ide"
        onPress={() => Alert.alert('Cím', 'Valami', [
          {text: 'Yes', onPress: () => console.log('Igen')},
          {text: 'No', onPress: () => console.log('Nem')},
        ])}
      />
</code>

prompt iOS-en:


<code javascript>
      <Button 
        title="Kattints ide"
        onPress={() => Alert.prompt('Cím', 'Üzenet', 
        text=>console.log(text))}
      />
</code>


Androidon nem működik.

===== Gomb más stílussal =====

<code javascript>
//...
<TouchableHighlight
          style={styles.runButton}
          onPress={handleButton}
          >
          <Text style={styles.runText}>BUTTON</Text>
</TouchableHighlight>


const styles = StyleSheet.create({
  //...
  runButton: {
    backgroundColor: 'blue',
    marginTop: 10,
    padding: 10,
    borderRadius: 3,
  },
  runText: {
    color: 'white',
    paddingLeft: 10,
    paddingRight: 10,
    fontSize: 22,
  }
});


</code>


===== 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>
import React from 'react';
import { StyleSheet, Text, TouchableHighlight } from 'react-native';

const Button = (props) => {
    return (
        <TouchableHighlight
        style={styles.button}
        onPress={props.onPress}
        >
            <Text style={styles.buttonText}>Számít</Text>
        </TouchableHighlight>

    );
}

export default Button;

const styles = StyleSheet.create({
    button: {
        backgroundColor: 'blue',
        marginTop: 10,
        padding: 10,
        borderRadius: 3,

    },
    buttonText: {
        color: 'white',
        paddingLeft: 10,
        paddingRight: 10,
        fontSize: 22,
    },    
});
</code>

<code javascript App.js>
import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Button from './components/Button';

export default function App() {
  const [num, setNum] = useState('');

  return (
    <View style={styles.container}>
      <Text>Gomb teszt</Text>

      <Button onPress={() => setNum(35)} />

      <Text>{num}</Text>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'aqua',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
</code>

===== Pressable =====

A Button elavultnak számít, helyette a Pressable-t ajánlják.

<code javascript>
<Pressable onPress={increment} style={styles.button}>
    <Text style={styles.buttonText}>Növel</Text>
</Pressable>
</code>


Stílus:

<code javascript>
button: {
    backgroundColor: 'dodgerblue',
    paddingVertical: 8,
    paddingHorizontal: 8,
    borderRadius: 3,
    margin: 10,
    alignItems: 'center',
},
buttonText: {
    color: 'white',
    fontSize: 14,
    textTransform: 'uppercase',
},
</code>

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>