Saját gomb komponens létrehozása

Tök jó dolog, hogy a React Native rengeteg komponenst biztosít, de egy saját komponens is számos előnnyel bír.

Vannak esetek, amikor nem akarunk beépített, vagy külső csomagból származó komponenst használni.

Konfigurálható saját gomb komponens

Nem húzom az időt felesleges szócsépléssel, jöjjön lépésről-lépésre egy „custom component” készítése. Minden egyes lépést bemutatok és magyarázok, de hozzá nézheted, és ki is próbálhatod saját mobilodon azt az Expo Snack-et, amit ehhez a bejegyzéshez csináltam.

Mappák és fájlok

Először létrehoztam egy components nevű mappát a saját komponenseknek. Ezen belül csináltam egy CustomButton mappát az egyéni gomb komponensnek. Még beljebb egy CustomButton.js komponens fájlt, ahová a kód kerül. És egy index.js segéd fájlt, amit a CustomButton importálásához használtam:

CustomButton.js

Ebben van az egyéni gomb forráskódja, jó kis JSX-ben.

A szükséges importálásokkal kezdtem:

import { Pressable, StyleSheet, Text } from "react-native";

Az egyelőre még üres komponens így néz ki:

const CustomButton = () => {
  return (
    
  );
};

props, azaz paraméterek

Azt szeretném, hogy a komponens kívülről legyen vezérelhető. Magyarul paraméterekben (props) kapja meg a következő jellemzőket:

• onPress: ez lesz a kezelő függvény, vagyis a „kattintás”-ra végrehajtódó kód
• text: ez a felirat jelenik meg a gombon
• type: ezzel fogom vezérelni a gomb stílusát
• bgColor: külön a háttérszínnek
• fgColor: a gomb feliratának (text) színe

Ezeket kétféleképpen tudom átadni a komponensnek. Vagy egyetlen props paraméterben:

const CustomButton = (props) => {

És ilyenkor úgy tudom őket használni például, hogy:

props.bgColor

Vagy a másik módja a paraméterek átadásának (destruktúrálással) kibontva, az összeset megadva, esetenként kezdőértékkel is ellátva, ahogy itt a type esetében:

const CustomButton = ({
  onPress,
  text,
  type = "PRIMARY",
  bgColor,
  fgColor,
}) => {

Komponens törzse

Én úgy csináltam, hogy felhasználtam a Pressable gyári komponenst, ami nyomkodhatóvá (kattinthatóvá) teszi az elemet. A Pressable hasában elhelyeztem egy Text-et, ami szintén a react-native csomag része.

Tehát a gomb maga, baromi egyszerű felépítésű.

Így néz ki a Pressable:

<Pressable
      onPress={onPress}
      style={[
        styles.container,
        styles[`container_${type}`],
        bgColor ? { backgroundColor: bgColor } : {},
      ]}
    >
</Pressable>    

Ez kapja meg a props-ból érkező kezelő függvényt.

A stílus, mivel most StyleSheet-el dolgoztam egy tömböt kap a style paraméterben. Itt használtam fel a szintén props-ból érkező type és bgColor értékeket.

A gomb felirata, vagyis a Text pedig így néz ki:

<Text
    style={[
      styles.text,
      styles[`text_${type}`],
      fgColor ? { color: fgColor } : {},
    ]}
  >
    {text}
</Text>

A stílust szintén a kívülről érkező type és fgColor értékek felhasználásával állítottam be. Akárcsak a feliratot, ami a text prop-ból származik.

A stílusra külön most nem térek ki. A lényeg az, hogy a komponens fájlon belül helyeztem el a stílusokat is:

const styles = StyleSheet.create({});

Használat

Az alkalmazáson belül az App.js fájlban importáltam a komponensemet:

import CustomButton from './components/CustomButton/index';

Vagy index nélkül is jónak kell lennie:

import CustomButton from './components/CustomButton/';

A kezelő függvényt is az App.js-ben írtam meg és mindössze annyit csinál, hogy a gombra való nyomáskor felugrik egy üzenet:

const onSignIn = () => {
    Alert.alert('onSignIn pressed');
};

A component hívása és paraméterezése pedig így történt meg:

<CustomButton onPress={onSignIn} text="Sign in" type="PRIMARY" />

Látható, hogy átadtam neki az onPress kezelőt, a gomb feliratát (text) és a stílus kiválasztását segítő type-ot.

Hol van a gomb- és a felirat színe? Ha megnézed a kódot, akkor úgy adtam meg, hogy ha nem érkezne ezekben a props-okban érték, akkor az legyen az alapértelmezett, ami a styles stílus objektumban meg lett adva, vagy esetleg semmi, ahogy itt is van:

bgColor ? { backgroundColor: bgColor } : {},

fgColor ? { color: fgColor } : {},

Enjoy

Nos ennyit, amit a saját komponensek készítéséről szerettem volna elmondani. Biztosan lehet ezt még finomítani, fokozni. De szerintem gondolat ébresztőnek elegendő volt. Használd egészséggel! 🙂