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!