Tartalomjegyzék

< React Native

React Native - Rádiógomb

Telepítés

npm install react-native-radio-buttons-group

Példa

import React, { useMemo, useState } from 'react';
import RadioGroup from 'react-native-radio-buttons-group';
 
export default function App() {
 
    const radioButtons = useMemo(() => ([
        {
            id: '1',
            label: 'Lehetőség 1',
            value: 'option1'
        },
        {
            id: '2',
            label: 'Lehetőség 2',
            value: 'option2'
        },
        {
            id: '3',
            label: 'Lehetőség 3',
            value: 'option3'
        }
    ]), []);
 
    const [selectedId, setSelectedId] = useState();
 
    return (
        <RadioGroup 
            radioButtons={radioButtons} 
            onPress={setSelectedId}
            selectedId={selectedId}
        />
    );

Egy lehetséges teljes kód:

App.js
import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { RadioGroup } from 'react-native-radio-buttons-group';
 
export default function App() {
  const [selectedId, setSelectedId] = useState(null);
  const radioButtons = [
    {
      id: '1',
      label: 'Option 1',
      value: 'option1',
    },
    {
      id: '2',
      label: 'Option 2',
      value: 'option2',
    },
    {
      id: '3',
      label: 'Option 3',
      value: 'option3',
    },
  ]
  return (
    <View style={styles.container}>
      <Text>Rádiógomb</Text>
      <View>
        <Text>{selectedId}</Text>
      </View>
 
      <RadioGroup
        radioButtons={radioButtons}
        onPress={setSelectedId}
        selectedId={selectedId}
      />
 
      <StatusBar style="auto" />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Lásd még