[React Native] Select, 라디오 버튼, 체크박스

1. Select

import React, { useState } from "react";
import { Button, View } from "react-native";
import SelectBox from 'react-native-multi-selectbox-typescript';

/*
import RNPickerSelect from 'react-native-picker-select'

const values = [
  { label: "Football", value: "축구" },
  { label: "Baseball", value: "야구" },
  { label: "Hockey", value: "하키" },
];

const App = () => {
  
  const [pickerSelect, setPickerSelect] = useState("");

  const handleClick = () => {
    console.log(pickerSelect);
  }
  
  return (
    <View>
      <RNPickerSelect 
        onValueChange={(value) => setPickerSelect(value)}
        items={values}
      />

      <Button title="선택" onPress={handleClick} />
    </View>
  )
}

export default App;
*/


// import { xorBy } from 'lodash';

const K_OPTIONS = [
  {
    item: 'Juventus',
    id: 'JUVE',
  },
  {
    item: 'Real Madrid',
    id: 'RM',
  },
  {
    item: 'Barcelona',
    id: 'BR',
  },
  {
    item: 'PSG',
    id: 'PSG',
  },
  {
    item: 'FC Bayern Munich',
    id: 'FBM',
  },
  {
    item: 'Manchester United FC',
    id: 'MUN',
  },
  {
    item: 'Manchester City FC',
    id: 'MCI',
  },
  {
    item: 'Everton FC',
    id: 'EVE',
  },
  {
    item: 'Tottenham Hotspur FC',
    id: 'TOT',
  },
  {
    item: 'Chelsea FC',
    id: 'CHE',
  },
  {
    item: 'Liverpool FC',
    id: 'LIV',
  },
  {
    item: 'Arsenal FC',
    id: 'ARS',
  },

  {
    item: 'Leicester City FC',
    id: 'LEI',
  },
];

export default function App() {
  const [selectedTeam, setSelectedTeam] = useState({});
  const [selectedTeams, setSelectedTeams] = useState([]);

  const onChange = () => {
    return (val) => setSelectedTeam(val);
  }

  const selected = () => {
    console.log(selectedTeam);
    console.log(selectedTeam.id);
  }

  return (
    <View style={{margin: 30}}>
      <SelectBox 
        label="Select Single" 
        options={K_OPTIONS}
        value={selectedTeam}
        onChange={onChange()}
        hideInputFilter={false}
      />
      <Button title="선택" onPress={selected} />
    </View>
  )
}

 

2. 라디오 버튼

import React, { useState } from "react";
import { Text, View } from "react-native";
import { RadioGroup, RadioButton } from 'react-native-flexi-radio-button';

const App = () => {

  const [checked, setChecked] = useState("first");

  return (
    <View>
      <RadioGroup
        size={24}
        thickness={2}
        color="#9575b2"
        highlightColor="#ccc8b9"
        selectedIndex={1}
        onSelect = {
          (index:any, value:any) => console.log(index, value)
        }
      >
        <RadioButton
          value="first" 
          status={checked === "first" ? "checked" : "uncheked"} 
          onPress={() => setChecked("first")}
        >
          <Text>Apple</Text>
        </RadioButton>
        <RadioButton
          value="second" 
          status={checked === "first" ? "checked" : "uncheked"} 
          onPress={() => setChecked("second")}
        >
          <Text>Banana</Text>
        </RadioButton>
        <RadioButton
          value="third" 
          status={checked === "first" ? "checked" : "uncheked"} 
          onPress={() => setChecked("third")}
        >
          <Text>Pear</Text>
        </RadioButton>
      </RadioGroup>
    </View>
  )
}

export default App;

 

3. 체크박스

import React, { useState } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { Checkbox } from "react-native-paper";

const App = () => {

  const [checked, setChecked] = useState(false);

  const handleCheck = () => {
    console.log(checked);
  }

  return(
    <View style={styles.container}>
      <View style={styles.checkboxContainer}>
        <Checkbox 
          status={checked ? 'checked' : 'unchecked'} 
          onPress={() => {setChecked(!checked)}} 
        />
        <Text style={styles.text}>Is CheckBox selected: {checked ? "👍" : "👎"}</Text>
      </View>
      <Button title="체크확인" onPress={handleCheck} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  checkboxContainer: {
    flexDirection: "row"
  },
  text: {
    marginTop: 5
  }
});

export default App;