RadioButton komponens

Rádió gombot megvalósítani a React Native Paper „csomagban” levő RadioButton komponenssel a legegyszerűbb szerintem.

Személy szerint úgy vagyok vele, hogy amikor csak tehetem, inkább kerülöm a harmadik féltől származó React Native könyvtárak / csomagok használatát.

Ha mégis ilyenre vetemedek, akkor igyekszek olyan csomagot használni, ami széles körben támogatott és használt, valamint nem elavult. Talán ez utóbbi az egyik legfontosabb követelmény. Így esett a választásom a React Native Paper csomagra.

React Native Paper RadioButton

Magáról a csomagról már írtam egy másik bejegyzésben, így ezt most itt mellőzném.

Helyette inkább rögtön a lényegre is térek. A csomag jelen pillanatban öt lehetőséget kínál arra, hogy a mobil alkalmazásunkban rádió gombokat vagy gomb csoportokat használjunk:

• RadioButton
• RadioButton.Android
• RadioButton.IOS
• RadioButton.Item
• RadioButton.Group

Amire nekem szükségem volt, az konkrétan egy olyan megoldás, amivel létre tudok hozni egy rádió gomb csoportot és lehetőleg úgy nézzen ki, hogy maga a gomb szövege és a mellette levő „kijelölő szimbólum” az egymás mellett legyen:

Ezt a RadioButton.Item tudja a fenti öt közül.

Telepítés

Ahhoz, hogy egyáltalán használni lehessen a React Native Paper csomagot, elsőként telepíteni kell a következő paranccsal:

yarn add react-native-paper

Hogyan használjuk?

A bejegyzés alján található egy működő példa, ezért nem másolom a posztba a teljes kódot. Azzal kezdtem, hogy csináltam egy components könyvtárat, mert ebben illik tárolni a komponenseket. Aztán létrehoztam egy külön komponenst ezen a könyvtáron belül CustomRadioButtonGroup.js néven.

Az App.js pedig mindössze használja ezt a komponenst és a teljes kódja így fest:

import CustomRadioButtonGroup from './components/CustomRadioButtonGroup';

const App = () => {
  return (
    <>
      <CustomRadioButtonGroup />
    </>
  );
};

export default App;

A CustomRadioButtonGroup.js komponens

A RadioButton használatához ezt importáltam a „papír csomagból”:

// components/CustomRadioButtonGroup.js

import { RadioButton } from 'react-native-paper';

Most egy három gombból álló csoportot valósítottam meg. Egy rádió gombnak van egy felirata és egy értéke, amit valahol biztosan fel akarunk használni. Így létrehoztam egy tömböt a teszteléshez, amit tehettem volna a komponenssel azonos fájlba is. Viszont én külön akartam választani egymástól az adatot és a komponenst (mert így szép), ezért létrehoztam az assets mappán belül egy RadioData.js fájlt:

// assets/RadioData.js

export const options = [
  { label: 'One', value: 'ONE' },
  { label: 'Two', value: 'TWO' },
  { label: 'Three', value: 'THREE' },
];

Ezt használtam teszt adatként a komponensben:

// components/CustomRadioButtonGroup.js

import { options } from '../assets/RadioData';

A komponensen belül state változókat használtam a rádió gombok kapcsolgatásához:

const [value, setValue] = useState(null);

RadioButton.Item

Említettem, hogy egy rádió gomb és feliratának megjelenítését a RadioButton.Item teszi lehetővé. Mielőtt még erre kitérek, gyorsan elmondom, hogy a JavaScript map() függvényével jelenítettem meg a tömb elemeit. Éppen ezért, egy elem megjelenítéséhez csináltam egy külön függvényt:

  const renderItem = (item) => {
    return (
      <View style={styles.item}>
        <RadioButton.Item
          label={item.label}
          value={item.value}
          style={styles.radioItem}
          color='black'
          labelStyle={{
            color: 'brown',
          }}
        />
      </View>
    );
  };

Ez semmi extrát nem csinál. Paraméterként megkap egy tömb elemet (item), és azt egy <View> elemen belül megjeleníti. Egy elem pedig nem más, mint egy RadioButton.Item komponens, ami egy rádió gombnak felel meg.

Meg kell még említenem azokat a tulajdonságokat is, amiket át lehet / kell adni a RadioButton.Item komponensnek:

• label: kötelező megadni és ez jelenti a gomb szövegét
• value: ez az értéke
• style: stílust lehet hozzáadni a gombot tartalmazó konténerhez
• color: a gomb szimbólumának színe
• labelStyle: ez egy stílus objektumot jelöl, ami a gomb szövegének megjelenését vezérli

RadioButton.Group

A komponens megjelenítő részében – ahol a renderelés végbemegy -, azaz a return függvény belsejében hívtam meg a renderItem függvényt, mint a map() függvénynek átadott callBack-et:

  return (
    <View style={styles.container}>
      <View style={styles.groupContainer}>
        <RadioButton.Group
          onValueChange={(newValue) => setValue(newValue)}
          value={value}>
          {options.map(renderItem)}
        </RadioButton.Group>
      </View>
      <Pressable onPress={onPressFunction}>
        <Text style={styles.submitText}>Submit</Text>
      </Pressable>
    </View>
  );
};

Ami fontos, hogy a map() függvényt a RadioButton.Group komponensen belül kell meghívni, mivel ez konténerként fogja egységbe a rádió gombokat. Tehát ez jelzi gyakorlatilag azt, hogy most egy gomb csoporttal dolgozunk.

Csupán részlet kérdés, de a gomb csoport alá raktam egy Submit gombot, amihez írtam egy onPressFunction kezelőt. Ezzel csak demonstrálni szerettem volna a működést, hogyan lehet ellenőrizni és elküldeni a kiválasztott gomb értékét.

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

És akkor itt van minden összegyúrva, kipróbálható formában. Remélem hasznos volt!