react picker select, selectbox watcher 이용하여 다양한 데이터 선택하기

프로젝트 생성후 입력해야 하는 설치문

npm install react-native-picker-select

npm install @react-native-picker/picker

npm install watcher

npm install react-native-svg@9

 

App.tsx

import React, { useState } from "react";
import { Button, View } from "react-native";

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


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


export default function App(){

   const [pickerSelect, setPickerSelect] = useState("")

//버튼 클릭시 호출되는 함수
  const handleClick = () =>{
    console.log(pickerSelect)
  }

  return(
    <View>
      <RNPickerSelect
      onValueChange={(value)=>setPickerSelect(value)}
      items={values}/>

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

    </View>
  )

}

실행시 화면

 

 

---

SelectBox 사용하는 경우

App.tsx

import React, { useState } from "react";
import { Button, View } from "react-native";

import SelectBox from 'react-native-multi-selectbox-typescript'


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([])

  function onChange(){
    return (val) => setSelectedTeam(val)
  }

  function selected(){
    console.log(selectedTeam)
    console.log(selectedTeam.id)
    console.log(selectedTeam.item)

  }
  
  return(
    <View style={{margin:30}}>

      <SelectBox
      label="Select Single"
      options={K_OPTIONS}
      value={selectedTeam}
      onChange={onChange()}
      hideInputFilter={false}/>

      <Button title="선택" onPress={selected}/>


    </View>
  )



}

 

실행시 화면

 

값 선택시 콘솔창

참고 사이트

https://tahuuchi.info/react-native-multi-selectbox-typescript

React native multi selectbox typescript