Tartalomjegyzék

< React Native

React Native gombok

Nyomógomb

import { StyleSheet, SafeAreaView, Button } from 'react-native';
    <SafeAreaView style={styles.container}>
      <Button 
        title="Kattints ide"
        onPress={() => alert('vmi')}
      />
      <StatusBar style="auto" />
    </SafeAreaView>

Alert osztály: 

import { StyleSheet, SafeAreaView, Button, Alert } from 'react-native';
      <Button 
        title="Kattints ide"
        onPress={() => Alert.alert('Cím', 'Valami', [
          {text: 'Yes'},
          {text: 'No'},
        ])}
      />
      <Button 
        title="Kattints ide"
        onPress={() => Alert.alert('Cím', 'Valami', [
          {text: 'Yes', onPress: () => console.log('Igen')},
          {text: 'No', onPress: () => console.log('Nem')},
        ])}
      />

prompt iOS-en: 

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

Androidon nem működik.

Gomb más stílussal

//...
<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,
  }
});

A gomb külön fájlban

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,
    },    
});
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',
  },
});

Pressable

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

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

Stílus: 

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

Dokumentáció: https://reactnative.dev/docs/pressable (2024)

Pressable külön fájlban

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',
    },
});