Custom input készítés

Ha unjuk, vagy nem elég jó nekünk a „gyári” TextInput, akkor tervezzünk saját beviteli mezőt, építsünk custom input komponenst.

Expo Snack – működő példa

Készítettem egy működő példát, ami itt található. Ebben a teljes forráskód fellelhető, így hozzá lehet nézni. Én lépésről-lépésre írom le, hogy mit csináltam.

Mappák és fájlok

Ahogyan azt az egyéni gomb komponens esetében is tettem, létrehoztam egy külön könyvtárat a komponenseknek.

Először készítettem egy components nevű mappát. Ezen belül csináltam egy CustomInput mappát az egyéni gomb komponensnek. Aztán egy CustomInput.js komponens fájlt, ahová a kód kerül. És egy index.js segéd fájlt, amit a CustomInput importálásához használtam:

CustomInput.js

Ez tartalmazza a komponens kódját.

Importáltam, amire szükségem volt:

import { View, StyleSheet, TextInput } from "react-native";

Íme az üres komponens függvény váza:

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

props

Aztán elkezdtem gondolkodni azon, hogy milyen adatokat szeretnék átadni kívülről a függvénynek. Kell maga az érték (value), egy érték beállító függvény (setValue), egy placeholder (placeholder) segítségként a beviteli mezőben megjelenő szövegnek, és egy információ, hogy titkosított-e a szövegbevitel vagy sem (secureTextEntry). Itt arra az esetre gondolok, ha jelszó mezőt szeretnék használni (és fogok is), amiben a bevitt karakterek csillagozva jelennek meg.

A paraméterekkel kiegészítve már így nézett ki a komponensem:

const CustomInput = ({ value, setValue, placeholder, secureTextEntry }) => {
  return (
    <View style={styles.container}>
      <TextInput
        value={value}
        onChangeText={setValue}
        style={styles.input}
        placeholder={placeholder}
        secureTextEntry={secureTextEntry}
      />
    </View>
  );
};

A paramétereket egyesével átadtam (kiszedtem a props változóból). A komponens törzse pedig egy View és egy TextInput react-native komponensből áll.

A TextInputnak a value, onChangeText, style, placeholder és secureTextEntry attribútumait használtam. Ezek közül egyedül a style-t nem adtam meg most kívülről. Ezt a komponensen belül helyeztem el. És az igazat megvallva egyelőre magának a TextInput-nak meghagytam az alapértelmezett stílusát:

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    width: "100%",
    borderColor: "#e8e8e8",
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
    marginVertical: 5
  },
  input: {},
});

Próba 1.

Az App.js-ben használtam a komponenst. Ha paraméterek nélkül hívom, akkor semmi extra. Egy üres beviteli mező, ami már képes adatok fogadására:

Értékmegőrzés – useState

Ahhoz, hogy a bevitt értékkel valamit lehessen kezdeni, state változókban kell tárolni az értékeket. Erre jó a useState. Hogy ezt szemléltessem, készítek gyorsan egy beléptető űrlapot két mezővel és egy gombbal. Egyik mező a felhasználó névnek, másik pedig a jelszónak lesz létrehozva.

Az App.js-ben importáltam a useState-et:

import { useState } from "react";

Ha már username és password lesz a két mező, akkor felvettem a state változókat és a beállító függvényeiket is:

export default function App() {

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

Az egyéni beviteli mező szimpla hívását pedig lecseréltem a felparaméterezett hívásokra:

<CustomInput
    placeholder="Username"
    value={username}
    setValue={setUsername}
  />
  <CustomInput
    placeholder="Password"
    value={password}
    setValue={setPassword}
    secureTextEntry={true}
  />

Adatok küldése

Valahogy ellenőrizni kellene, hogy a beírt adatok valóban megmaradnak-e és tudunk velük dolgozni. Legegyszerűbb megoldás, ha van egy gomb, amivel kiíratom az értékeket a konzolba.

Ha már van saját gomb komponens, akkor nehogy már ne azt használjuk :). Ebben a bejegyzésben megtalálod, hogyan kell létrehozni, de az Expo Snack példában is ott a teljes forráskód.

Importáltam az App.js-be a gombot és el is helyeztem a beviteli mezők alá a komponenst:

<CustomButton onPress={onSignInPressed} text="Sign In" />

Ami még hiányzik, hogy megírjam az onSignInPressed kezelőt, ami annyit fog csinálni, hogy a gomb lenyomása után, szépen a konzolba kiírja a begépelt felhasználó nevet és jelszót:

  const onSignInPressed = () => {
    console.log(`Username = ${username}`);
    console.log(`Password = ${password}`);
  }

És így is lett:

Hova tovább?

A történet majd úgy lesz kerek, ha az inputok ellenőrzése is meg lesz oldva. Ez azonban egy másik bejegyzésbe fog beleférni.